1. 使用情况一:直接把src的值写在img中
代码样式
<ul>
<li >
<img :src="./src/img/1.jpg" alt="">
//按照你图片存放的路径
</li>
</ul>
这样写完全没有问题 他会找到图片并进行显示
vuedatasrcimg_12">2. 使用情况二:把vue中data的src的值写在img中
<ul>
<li v-for="(item,index) in newListCon" :key="index">
<div class="item-img">
<img :src="imgSrc" alt="">
</div>
</li>
</ul>
//
<script>
export default {
name: 'SuccessCase',
data() {
return {
imgSrc:"./src/img/1.jpg"
}
},
}
</script>
这种就有问题了 他的图片不会显示了???
表现形式就是
1.在网页上 你打开控制台 查看img标签的src 发现是./src/img/1.jpg
路径没问题啊 怎么不显示呢
解决:
把路径 用require包裹起来
imgSrc:require("./src/img/1.jpg"),
这样图片就可以显示了