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 + '')"