Vue动态渲染本地图片

今天总结一下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')},
    ]
  }
}