Vue中＜img＞ 标签的 src 值全解析
作者：BillKu
这篇文章主要介绍了Vue中＜img＞ 标签的 src 值全解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
1. 直接指定 src 的值（适用于网络图片）
如果你使用的是网络图片（即图片的URL是完整的HTTP或HTTPS链接），可以直接指定 src 的值：
<template>
<div>
<img src="https://example.com/your-image.jpg" alt="描述图片">
</div>
</template>这种方式非常简单，适用于图片已经托管在网络上。
2. 直接指定 src 的值（适用于本地图片）
如果你使用的是本地图片（即图片存放在项目的 src/assets 或 public 目录中），直接指定 src 的值可能会导致图片无法正确加载。原因如下：
- Vue CLI 项目默认会使用 Webpack 打包，而 Webpack 会将本地图片视为模块处理。
- 如果你直接写
src="./assets/your-image.jpg"，Webpack 不会正确解析路径，导致图片加载失败。
正确的做法：
你需要使用 require 或 import 来引入图片，这样 Webpack 会正确处理路径。
<template>
<div>
<img :src="imageUrl" alt="描述图片">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: require('@/assets/your-image.jpg') // 使用 require 引入图片
};
}
};
</script>或者使用 import：
<template>
<div>
<img :src="imageUrl" alt="描述图片">
</div>
</template>
<script>
import imageUrl from '@/assets/your-image.jpg'; // 使用 import 引入图片
export default {
data() {
return {
imageUrl
};
}
};
</script>3. 将图片放在 public 目录
如果你不想通过 Webpack 处理图片，可以将图片放在 public 目录中。public 目录中的文件不会被 Webpack 处理，而是直接复制到打包后的 dist 目录中。
- 将图片放在
public/images/your-image.jpg。 - 直接指定
src的值为绝对路径：
<template>
<div>
<img src="/images/your-image.jpg" alt="描述图片">
</div>
</template>这种方式适合静态图片，且图片路径不会动态变化。
4. 动态绑定 src
如果你需要动态绑定图片路径（例如根据用户输入或条件切换图片），可以使用 v-bind（或简写为 :）动态绑定 src：
<template>
<div>
<img :src="imageUrl" alt="描述图片">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: '' // 初始为空
};
},
mounted() {
// 动态设置图片路径
this.imageUrl = require('@/assets/your-image.jpg');
}
};
</script>总结
- 网络图片：可以直接指定
src的值。 - 本地图片：
- 如果图片在
src/assets目录中，需要使用require或import引入。 - 如果图片在
public目录中，可以直接指定src的值为绝对路径。
- 如果图片在
- 动态图片：使用
v-bind动态绑定src。
到此这篇关于在Vue中，＜img＞ 标签的 src 值的文章就介绍到这了,更多相关vue img标签src值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！