vue中data中引用本地圖片報錯404


首先說明vue-cli中assets和static兩個文件的區別

1.assets在項目編譯的過程中會被webpack處理理解為模塊依賴,如果執行npm run dev或npm run build命令行,assets會被編譯,導致路徑發生變化,所以如果寫成絕對路徑,會存在問題

2.static在項目編譯的過程中webpack不會被解析,他相當於是存放第三方文件的地方,路徑可寫成絕對路徑

總結:assets中的文件路徑會變,static中的文件路徑不變

解決辦法:

1.將圖片放到static文件中  例 images:[{src:”/static/1.png”},{src:”/static/2.png”}]

2.將圖片作為模塊加載到頁面,webpack就可以將其解析(require())

在img的src中加入require

第一種用在a標簽
<a :href="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">
第一種用在img
<img :src="require('../../assets/601c5eaac1a0574a77f395aa9812d25.png')">

  


免責聲明!

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



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