首先說明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')">