最近遇到圖片路徑加載報錯的問題
之前一直都是把圖片放到assets的文件下的。總是報錯，看到一些文章並且嘗試成功了，特意記錄下
首先先說明下vue-cli的assets和static的兩個文件的區別，因為這對你理解后面的解決辦法會有所幫助
assets:在項目編譯的過程中會被webpack處理解析為模塊依賴，只支持相對路徑的形式，如< img src=”./logo.png”>和background:url(./logo.png),”./logo.png”是相對資源路徑，將有webpack解析為模塊依賴
static：在這個目錄下文件不會被webpack處理,簡單就是說存放第三方文件的地方，不會被webpack解析。他會直接被復制到最終的打包目錄(默認是dist/static)下。必須使用絕對路徑引用這些文件，這是通過config.js文件中的build.assetsPublic和build.assertsSubDirectory鏈接來確定的。任何放在static/中文件需要以絕對路徑的形式引用：/static[filename]
根據webpack的特性，總的來說就是static放不會變動的，第三檔的文件，asserts放可能會變動的文件
問題來了，用js動態加載assets或者本文件的圖片出現404的狀態碼
跑起來發現圖片不顯示，錯誤碼為404,
原因：在webpack中會將圖片圖片來當做模塊來用，因為是動態加載的，所以url-loader將無法解析圖片地址，然后npm run dev 或者npm run build之后導致路徑沒有被加工【被webpack解析到的路徑都會被解析為/static/img/[filename].png，完整地址為localhost:8080/static/img/[filename].png】
解決辦法：①將圖片作為模塊加載進去，比如images:[{src:require(‘./1.png’)},{src:require(‘./2.png’)}]這樣webpack就能將其解析。②將圖片放到static目錄下，但必須寫成絕對路徑如images:[{src:”/static/1.png”},{src:”/static/2.png”}]這樣圖片也會顯示出來，當然你也可以通過在webpack.base.config.js定義來縮短路徑的書寫長度。
這是我看見的文章截圖，但我發現 只要把圖片文件直接放到static文件，寫相對路徑也是可以的啦
如有疑問 歡迎來討論呀~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
.后續發現把圖片文件直接放到static文件，打包上線的時候 會發現找不到圖片的路徑 在打包的時候還是要改圖片路徑 ./dist/static/img/xxx.png