今天總結(jié)一下Vue動(dòng)態(tài)渲染本地圖片的一些問(wèn)題~
如果你直接使用本地圖片地址，像下面這樣

<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: '產(chǎn)權(quán)結(jié)構(gòu)樹(shù)', imgName: 'icon_01.png' },
      { name: '產(chǎn)權(quán)管理樹(shù)', imgName: 'icon_02.png' },
      { name: '產(chǎn)權(quán)關(guān)系圖', 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: '產(chǎn)權(quán)結(jié)構(gòu)樹(shù)', imgUrl: require('../../images/icon_01.png') },
      { name: '產(chǎn)權(quán)管理樹(shù)', imgUrl: require('../../images/icon_02.png') },
      { name: '產(chǎn)權(quán)關(guān)系圖', imgUrl: require('../../images/icon_03.png')},
    ]
  }
}

文章來(lái)自（https://lifangdan.github.io/blog/views/frontEnd/vue/image.html）