vue?圖片路徑?“@/assets“?報錯問題及解決
問題
在更改背景圖片時寫的圖片相對路徑是這樣的:
由于@在webpack 被resolve.alias配置下等價于/src,然后直接運行了程序結(jié)果報錯了
報錯狀態(tài):
大概意思就是說,無法解析 asset 包
解決
經(jīng)過查詢資料找到了解決辦法:
由于相對根目錄的路徑 “/assets/background.png” webpack不解析
此時需要在@前加上“~”
因為帶“~”的路徑 “~@/assets/background.png” 被webpack解析為 require(src/assets/background.png) 動態(tài)引入
就能成功的解決上面的問題
為什么
至于為什么會這樣
請看繼續(xù)往下看:
注意:絕對路徑方式導(dǎo)入的圖片需要存儲在 publiic 文件夾下
靜態(tài)導(dǎo)入文件路徑
<img src="../../assets/1.png" /> <!-- 或者如下 --> <img src="@/assets/1.png" />
靜態(tài)導(dǎo)入絕對路徑
<img src="images/1.png" /> <!-- 或者如下 --> <img src="/images/1.png" />
動態(tài)導(dǎo)入相對路徑
方法1(require 寫在html中):
<img :src="require('../../assets/' + imageUrl)" />
<script> export default { data() { return { // 圖片路徑變量,真實路徑為 assets/images/1.png img: 'images/1.png', imageUrl: require('../../assets/' + this.img) } } } </script>
動態(tài)導(dǎo)入絕對路徑
<img :src="imageUrl" />
<script> export default { data() { return { // 圖片路徑變量,真實路徑為 public/images/1.png imageUrl:'images/1.png' // 或者 imageUrl:'/images/1.png' } } } </script>
需要明白以下幾點內(nèi)容:
- 1.什么是相對路徑和絕對路徑?
- 2.相對路徑上加 @ 為什么不一樣?
- 3.動態(tài)加載時為什么使用require?
1.什么是相對路徑和絕對路徑?
簡單的說就是:
- 相對路徑:以 .開頭的,例如./、../之類的。就是相對于自己的目標(biāo)文件的位置。
- 絕對路徑: 以/開頭的。就是目標(biāo)文件的真實路徑,表示當(dāng)前站點的真是根目錄。
2.相對路徑加上 @ 為什么不一樣?
請仔細閱讀以下內(nèi)容:
3.動態(tài)加載時為什么使用require?
<img :src="'./assets/images/02.jpg'" alt=""> // 錯誤的引入方式 <!-- 編譯后 --> <img src="./assets/images/02.jpg" alt=""> <!-- 注意(絕對路徑) --> <img :src="'images/02.jpg'" alt=""> // 正確的引入方式 <!-- 編譯后 --> <img src="images/02.jpg" alt="">
src調(diào)用了v-bind指令處理其內(nèi)容,相對路徑不會被webpack的file-loader處理。
編譯后,資源目錄assets結(jié)構(gòu)已變,而代碼的目錄沒變,所以相對路徑這種方式不行,而絕對路徑?jīng)]有問題
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法
下面小編就為大家分享一篇淺談Vue-cli單文件組件引入less,sass,css樣式的不同方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)
這篇文章主要介紹了vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08