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