好久沒更博了，最近也不知道在忙啥，反正就是感覺挺忙的，在群里看到陸陸續續有剛入vue小伙伴問vue動態加載圖片總是404的狀況，這篇就簡單的說明為什么會出現以及解決辦法有哪些。
首先先說明下vue-cli的和的兩個文件的區別，因為這對你理解后面的解決辦法會有所幫助
：在項目編譯的過程中會被處理解析為模塊依賴vue 加載本地資源圖片，只支持相對路徑的形式，如< img src=”./logo.png”>和:url(./logo.png),”./logo.png”是相對資源路徑，將有解析為模塊依賴
：在這個目錄下文件不會被處理,簡單就是說存放第三方文件的地方，不會被解析。他會直接被復制到最終的打包目錄(默認是dist/)下。必須使用絕對路徑引用這些文件，這是通過.js文件中的build.和build.鏈接來確定的。任何放在/中文件需要以絕對路徑的形式引用：/[]
根據的特性，總的來說就是放不會變動的，第三檔的文件，放可能會變動的文件
問題來了，用js動態加載或者本文件的圖片出現404的狀態碼
代碼實例
//js部分
data(){
{
:[{src:'./1.png'},{./2.png}]
}
}
跑起來發現圖片不顯示，錯誤碼為404,
原因：在中會將圖片圖片來當做模塊來用vue 加載本地資源圖片，因為是動態加載的，所以url-將無法解析圖片地址，然后npm run dev 或者npm run build之后導致路徑沒有被加工【被解析到的路徑都會被解析為//img/[].png，完整地址為:8080//img/[].png】
解決辦法：
①將圖片作為模塊加載進去，比如:[{src:(‘./1.png')},{src:(‘./2.png')}]這樣就能將其解析。
②將圖片放到目錄下，但必須寫成絕對路徑如:[{src:”//1.png”},{src:”//2.png”}]這樣圖片也會顯示出來，當然你也可以通過在.base..js定義來縮短路徑的書寫長度。
當然你說當本地圖片太多時，這樣寫豈不是很麻煩，那么其實我們是一這樣簡化操作的。
第一步：在里面新建一個json文件夾
第二部：填寫json文件,如圖
第三部：將json引入響應的vue文件中，解析引用就行了
如有疑問，歡迎進行討論。
以上這篇基于vue 動態加載圖片src的解決方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持我們。
本文標題: 基于vue 動態加載圖片src的解決方法
