在Vue中，＜img＞ 标签的 src 值

1. 直接指定 src 的值（适用于网络图片）

假如你利用的是网络图片（即图片的URL是完整的HTTP或HTTPS链接），可以直接指定 src 的值：
vue
复制

1. <template>
2.   <div>
3.     <img src="https://example.com/your-image.jpg" alt="描述图片">
4.   </div>
5. </template>

复制代码

这种方式非常简单，适用于图片已经托管在网络上。

---

2. 直接指定 src 的值（适用于本舆图片）

假如你利用的是本舆图片（即图片存放在项目的 src/assets 或 public 目次中），直接指定 src 的值大概会导致图片无法正确加载。缘故原由如下：

• Vue CLI 项目默认会利用 Webpack 打包，而 Webpack 会将本舆图片视为模块处置惩罚。
  
• 假如你直接写 src="./assets/your-image.jpg"，Webpack 不会正确剖析路径，导致图片加载失败。
  

正确的做法：

你需要利用 require 或 import 来引入图片，这样 Webpack 会正确处置惩罚路径。
vue
复制

1. <template>
2.   <div>
3.     <img :src="imageUrl" alt="描述图片">
4.   </div>
5. </template>
7. <script>
8. export default {
9.   data() {
10.     return {
11.       imageUrl: require('@/assets/your-image.jpg') // 使用 require 引入图片
12.     };
13.   }
14. };
15. </script>

复制代码

大概利用 import：
vue
复制

1. <template>
2.   <div>
3.     <img :src="imageUrl" alt="描述图片">
4.   </div>
5. </template>
7. <script>
8. import imageUrl from '@/assets/your-image.jpg'; // 使用 import 引入图片
10. export default {
11.   data() {
12.     return {
13.       imageUrl
14.     };
15.   }
16. };
17. </script>

复制代码

---

3. 将图片放在 public 目次

假如你不想通过 Webpack 处置惩罚图片，可以将图片放在 public 目次中。public 目次中的文件不会被 Webpack 处置惩罚，而是直接复制到打包后的 dist 目次中。

• 将图片放在 public/images/your-image.jpg。
  
• 直接指定 src 的值为绝对路径：
  

vue
复制

1. <template>
2.   <div>
3.     <img src="/images/your-image.jpg" alt="描述图片">
4.   </div>
5. </template>

复制代码

这种方式恰当静态图片，且图片路径不会动态厘革。

---

4. 动态绑定 src

假如你需要动态绑定图片路径（例如根据用户输入或条件切换图片），可以利用 v-bind（或简写为 :）动态绑定 src：
vue
复制

1. <template>
2.   <div>
3.     <img :src="imageUrl" alt="描述图片">
4.   </div>
5. </template>
7. <script>
8. export default {
9.   data() {
10.     return {
11.       imageUrl: '' // 初始为空
12.     };
13.   },
14.   mounted() {
15.     // 动态设置图片路径
16.     this.imageUrl = require('@/assets/your-image.jpg');
17.   }
18. };
19. </script>

复制代码

---

总结

• 网络图片：可以直接指定 src 的值。
  
• 本舆图片：
  
  
  
  • 假如图片在 src/assets 目次中，需要利用 require 或 import 引入。
    
  • 假如图片在 public 目次中，可以直接指定 src 的值为绝对路径。
    
  
  
• 动态图片：利用 v-bind 动态绑定 src。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。