vue?圖片路徑?“@/assets“?報(bào)錯(cuò)問(wèn)題及解決

更新時(shí)間：2022年09月22日 09:25:27 作者：小艾菜菜菜

這篇文章主要介紹了vue?圖片路徑?“@/assets“?報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

問(wèn)題

在更改背景圖片時(shí)寫(xiě)的圖片相對(duì)路徑是這樣的：

由于@在webpack 被resolve.alias配置下等價(jià)于/src，然后直接運(yùn)行了程序結(jié)果報(bào)錯(cuò)了

報(bào)錯(cuò)狀態(tài)：

大概意思就是說(shuō)，無(wú)法解析 asset 包

解決

經(jīng)過(guò)查詢資料找到了解決辦法：

由于相對(duì)根目錄的路徑 “/assets/background.png” webpack不解析

此時(shí)需要在@前加上“~”

因?yàn)閹?ldquo;~”的路徑 “~@/assets/background.png” 被webpack解析為 require(src/assets/background.png) 動(dòng)態(tài)引入

就能成功的解決上面的問(wèn)題

為什么

至于為什么會(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 寫(xiě)在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ì)路徑？

簡(jiǎn)單的說(shuō)就是：

相對(duì)路徑：以 .開(kāi)頭的，例如./、../之類(lèi)的。就是相對(duì)于自己的目標(biāo)文件的位置。
絕對(duì)路徑：以/開(kāi)頭的。就是目標(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)已變，而代碼的目錄沒(méi)變，所以相對(duì)路徑這種方式不行，而絕對(duì)路徑?jīng)]有問(wèn)題

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: