今天总结一下Vue
动态渲染本地图片的一些问题~
如果你直接使用本地图片地址,像下面这样
<div>
<img src="../../images/icon_01.png">
</div>
这是可以正常显示图片的,
但是如果你想遍历渲染本地图片,直接引用图片地址是不行的,需要用require
解析引入
<div class="box point"
v-for="(item,index) in navList"
:key="index">
<div><img :src="require(`../../images/${item.imgName}`)"></div>
<div v-html="item.name"></div>
</div>
data() {
return {
navList: [
{ name: '产权结构树', imgName: 'icon_01.png' },
{ name: '产权管理树', imgName: 'icon_02.png' },
{ name: '产权关系图', imgName: 'icon_03.png' },
]
}
}
或者你可以这样
<div class="box point"
v-for="(item,index) in navList"
:key="index">
<div><img :src="item.imgUrl"></div>
<div v-html="item.name"></div>
</div>
data() {
return {
navList: [
{ name: '产权结构树', imgUrl: require('../../images/icon_01.png') },
{ name: '产权管理树', imgUrl: require('../../images/icon_02.png') },
{ name: '产权关系图', imgUrl: require('../../images/icon_03.png')},
]
}
}