Vue 中img圖片加載失敗解決方案

在Vue有時候你引用本地圖片在本地環境可以正常顯示,但是到了服務器上就出現資源請求失敗以及無法顯示的情況。

這是因為當你在元素里面綁定:src時,Vue將綁定屬性的路徑作為字符串輸出了。

export default {
      data () {
         return {
            img: '../../XXX/XXX/xx.png'      
      }
    }
}

//////////
<img :src="img"> // 這種方式會先找到路徑解析完在渲染圖片

以上解決方法對於單個的渲染非常合適,但是如果后端是個憨批給你返回的list中img字段不是一個url而是你本地對應的圖片名稱,得需要用到require()方法親求本地文件

export default {
      data () {
         return {
            imgList:[
                  {
                        img: 'XX.png',
                        title: '測試'
                  },{
                        img: 'XX2.png',
                        title: '測試2'
                  }
            ]
      }
    }
}

////////////////

<div v-for="(item, index) in imgList" :key="index">
  <img :src="require(`../../xxx/xxx/${item.img}`)" alt="測試">
  <span>{{item.title}}</span>
</div>

以上方法基本可以解決大多數Vue中圖片加載失敗的問題。但是最好的方式還是前后端在開發前溝通好。還有就是服務器配置方面的問題，在Vue的項目中,如果親求圖片資源的url域名少一段則需要自己在webpack中根據開發環境生產環境自己進行配置。