下面我就為大家分享一篇基於vue 動態載入圖片src的解決方法，具有很好的參考價值，希望對大家有幫助。
好久沒更博了，最近也不知道在忙啥，反正就是感覺挺忙的，在群組裡看到陸陸續續有剛入vue小夥伴問vue動態載入圖片總是404的狀況，這篇就簡單的說明為什麼會出現以及解決方法有哪些。
首先先說明下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的狀態碼程式碼實例
<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
//js部分
data(){
return {
images:[{src:'./1.png'},{./2.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裡面新建一個json資料夾
第二部：填寫json檔,如圖
#第三部：將json引入回應的vue檔案中，解析引用就行了
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
在vue-cli專案中proxyTable跨域問題#
以上是關於vue如何實現動態載入圖片src的詳細內容。更多資訊請關注PHP中文網其他相關文章！
