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