好久沒發(fā)帖了，不知道最近在忙什么。反正我覺得很忙。在群里看到剛進Vue的朋友一個個問，Vue中圖片的動態(tài)加載總是404，這篇文章就簡單解釋一下為什么會出現(xiàn)，有什么解決辦法。

首先我會解釋一下vue-cli和vue-cli這兩個文件的區(qū)別，因為這會幫助你理解下面的解決方案。

: 在項目編譯的過程中，會被處理解析成模塊依賴，只支持相對路徑的形式，如<img src="./logo.png">和:url(./logo.png ),”./logo .png”是相對資源路徑，會被解析為模塊依賴

：這個目錄下的文件不會被處理XFlip Enterprise，簡單的說就是不會解析第三方文件存放的地方。它將被直接復制到最終的打包目錄（默認為dist/）。必須使用由構(gòu)建確定的絕對路徑來引用這些文件。并建造。.js 文件中的鏈接。放置在 / 中的任何文件都需要作為絕對路徑引用：/[]

根據(jù)特點，一般是放不會變的文件，第三個文件，可能變的文件。

問題來了，用js動態(tài)加載還是這個文件的圖片有404狀態(tài)碼

代碼示例

運行的時候發(fā)現(xiàn)圖片沒有顯示，錯誤碼是404。

原因：圖片和圖片在國內(nèi)會作為模塊使用動態(tài)老照片軟件破解版，因為是動態(tài)加載的，所以url-將無法解析圖片地址動態(tài)老照片軟件破解版，然后在npm run dev或npm run build后就不會處理路徑了[解析后的路徑將被解析為//img/[].png，完整地址為：8080//img/[].png]

解決方案：

①將圖片加載為模塊，如：[{src:('./1.png')},{src:('./2.png')}]，這樣就可以解析。

②把圖片放到目錄下，但一定要寫成絕對路徑如：[{src:”//1.png”},{src:”//2.png”}] ，圖片也會顯示出來常用ICON筆刷下載，當然你也可以通過在.base..js中定義來縮短路徑的書寫長度。

當然，你說當本地圖片太多的時候，這樣寫也不是很麻煩，所以其實我們就是這樣簡化操作的。

第一步：在里面新建一個json文件夾

第二部分：填寫json文件蝴蝶花紋筆刷下載5，如圖

第三部分：在響應的vue文件中引入json，并解析引用

如有疑問，歡迎討論。

以上基于vue動態(tài)加載圖片src的解決方案就是編輯器共享的所有內(nèi)容。希望能給大家一個參考，也希望大家多多支持。