在vue中動態加載圖片src屬性,會出現圖片加載不出來的情況


先說明下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放可能會變動的文件

問題代碼:

<img :ref="item.name" :src="img.imgtwoway" alt />
組件data中
img.imgtwoway:'@/assets/images/xxx.png'
這樣圖片是加載不出來的,這樣的情況下,圖片在瀏覽器中的路徑顯示為/assets/images/xxx.png
 
需要更改成:
img.imgtwoway:require('@/assets/images/xxx.png'),圖片才能顯示,圖片在瀏覽器中的路徑顯示是經過base64加密的。
 
原因:在webpack中會將圖片圖片來當做模塊來用,因為是動態加載的,所以url-loader將無法解析圖片地址,然后npm run dev 或者npm run build之后導致路徑沒有被加工


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM