需求如下:
需要动态加载图片,在写代码的时候发现,img标签直接动态绑定图片的相对路径的时候,图片不能显示,如下图效果
控制台查看元素的时候,发现也已经渲染,但是页面就是不显示
代码如下:
<div class="legend-content">
<div
v-for="(item, index) in legendData"
:key="index"
class="legend-item"
>
<img
:src="'../../assets/img/legend/' + item.icon + '.png'"
class="icon-legend">
<span>{{ item.name }}</span>
</div>
</div>
data() {
return {
legendData: [
{
id: 1,
name: '气象站',
icon: 'tuli_qixiangzhan'
},
{
id: 2,
name: '关注点',
icon: 'tuli_guanzhudian'
},
{
id: 3,
name: '供电局',
icon: 'tuli_gongdianju'
},
{
id: 4,
name: '施工点',
icon: 'tuli_shigongdian'
},
{
id: 5,
name: '学校',
icon: 'tuli_xuexiao'
},
{
id: 6,
name: '医院',
icon: 'tuli_yiyuan'
}
]
};
},
原因:动态地址,路径被加载器解析为字符串,所以图片找不到
解决方法:
设置绝对路径或者相对路径是改为用require引入才能成功,就可以动态使用了。
data() {
return {
isShow: true,
legendData: [
{
id: 1,
name: '气象站',
imgSrc: require(`../../assets/img/legend/tuli_qixiangzhan.png`)
},
{
id: 2,
name: '关注点',
imgSrc: require(`../../assets/img/legend/tuli_guanzhudian.png`)
},
{
id: 3,
name: '供电局',
imgSrc: require(`../../assets/img/legend/tuli_gongdianju.png`)
},
{
id: 4,
name: '施工点',
imgSrc: require(`../../assets/img/legend/tuli_shigongdian.png`)
},
{
id: 5,
name: '学校',
imgSrc: require(`../../assets/img/legend/tuli_xuexiao.png`)
},
{
id: 6,
name: '医院',
imgSrc: require(`../../assets/img/legend/tuli_yiyuan.png`)
}
]
};
},
<div class="legend-content">
<div
v-for="(item, index) in legendData"
:key="index"
class="legend-item"
>
<img
:src="item.imgSrc"
class="icon-legend">
</div>
</div>