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