Vue动态渲染本地图片

今天总结一下Vue动态渲染本地图片的一些问题~
如果你直接使用本地图片地址，像下面这样

这是可以正常显示图片的，
但是如果你想遍历渲染本地图片，直接引用图片地址是不行的，需要用require解析引入

data() {
  return {
    navList: [
      { name: '产权结构树', imgName: 'icon_01.png' },
      { name: '产权管理树', imgName: 'icon_02.png' },
      { name: '产权关系图', imgName: 'icon_03.png' },
    ]
  }
}

或者你可以这样

data() {
  return {
    navList: [
      { name: '产权结构树', imgUrl: require('../../images/icon_01.png') },
      { name: '产权管理树', imgUrl: require('../../images/icon_02.png') },
      { name: '产权关系图', imgUrl: require('../../images/icon_03.png')},
    ]
  }
}

文章来自（https://lifangdan.github.io/blog/views/frontEnd/vue/image.html）