Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接
上代码:
<img
:src="img"
alt="banner"
/>
data() {
return {
img: require(`src/common/images/phase${this.phase}/banner.png`)
}
},
再上代码:
<li
class="attend-item"
v-for="item in phaseData"
>
<img
:src="_getImgUrl(item .pic_name)"
alt="logo"
/>
</li>
methods: {
// 获取图片地址
_getImgUrl(pic_name) {
// 这里路径必须是拼接出来的,不能写死成:return require(pic_name)
return require('src/common/images/phase4/' + pic_name + '.jpg')
}
},