???? vue循环渲染本地图片不显示? ????

teamList: [{
title: '大数据拍牌',
imgUrl: './img/data.jpg',
introduce: '5星服务:强烈推荐',
cost: '15000',
bail: '3次不中赔1500',
scale: '30%',
type: '1',
}, {
title: 'E沪牌',
imgUrl: "./img/Ehupai.jpg",
introduce: '专业拍手,专线网络',
cost: '20000',
bail: '3次不中赔1500',
scale: '40%',
type: '3',
}, {
title: '淘沪牌',
imgUrl: "./img/taohupai.jpg",
introduce: '专业拍手,专线网络',
cost: '12000',
bail: '无保证金',
scale: '20%',
type: '4',
}, {
title: '168沪牌',
imgUrl: "./img/168hupai.jpg",
introduce: '专业拍手,专线网络',
cost: '8000',
bail: '无保证金',
scale: '10%',
type: '5',
}]

 

.vue文件

<ul class="list">
<li class="item" v-for="(item,index) in teamList" :key="index">
<!-- <img class="item_pic" :src="require(item.imgUrl + '')" alt=""> -->
<img class="item_pic" :src="item.imgUrl" alt="">
<p class="txt">{{item.introduce}}</p>
<p class="txt">手续费:<span>{{item.cost}}</span></p>
<p class="txt">保证金:<span>{{item.bail}}</span></p>
<p class="txt">中标率:<span>{{item.scale}}</span></p>
<p class="btn" @click="Go(item)">预约团队</p>
</li>
</ul>

效果(图片不显示)

修改src如下⬇️

<ul class="list">
<li class="item" v-for="(item,index) in teamList" :key="index">
<img class="item_pic" :src="require(item.imgUrl + '')" alt="">
<p class="txt">{{item.introduce}}</p>
<p class="txt">手续费:<span>{{item.cost}}</span></p>
<p class="txt">保证金:<span>{{item.bail}}</span></p>
<p class="txt">中标率:<span>{{item.scale}}</span></p>
<p class="btn" @click="Go(item)">预约团队</p>
</li>
</ul>

完美解决!!

划重点: 图片模块化引入

:src="item.imgUrl"  -->  :src="require(item.imgUrl + '')"
上一篇:SpringBoot 大文件上传解决方案(500M以上)


下一篇:实验2