vue?圖片路徑?“@/assets“?報錯問題及解決

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

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

問題

在更改背景圖片時寫的圖片相對路徑是這樣的：

由于@在webpack 被resolve.alias配置下等價于/src，然后直接運行了程序結果報錯了

報錯狀態(tài)：

大概意思就是說，無法解析 asset 包

解決

經過查詢資料找到了解決辦法：

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

此時需要在@前加上“~”

因為帶“~”的路徑 “~@/assets/background.png” 被webpack解析為 require(src/assets/background.png) 動態(tài)引入

就能成功的解決上面的問題

為什么

至于為什么會這樣

請看繼續(xù)往下看：

注意：絕對路徑方式導入的圖片需要存儲在 publiic 文件夾下

靜態(tài)導入文件路徑

<img src="../../assets/1.png" />
<!-- 或者如下 -->
<img src="@/assets/1.png" />

靜態(tài)導入絕對路徑

<img src="images/1.png" />
<!-- 或者如下 -->
<img src="/images/1.png" />

動態(tài)導入相對路徑

方法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)導入絕對路徑

<img :src="imageUrl" />

<script>
export default {
	data() {
        return {
            // 圖片路徑變量，真實路徑為 public/images/1.png
            imageUrl:'images/1.png'
            // 或者 imageUrl:'/images/1.png'
        }
    }
}
</script>

需要明白以下幾點內容：

1.什么是相對路徑和絕對路徑？
2.相對路徑上加 @ 為什么不一樣？
3.動態(tài)加載時為什么使用require？

1.什么是相對路徑和絕對路徑？

簡單的說就是：

相對路徑：以 .開頭的，例如./、../之類的。就是相對于自己的目標文件的位置。
絕對路徑：以/開頭的。就是目標文件的真實路徑，表示當前站點的真是根目錄。

2.相對路徑加上 @ 為什么不一樣？

請仔細閱讀以下內容：

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調用了v-bind指令處理其內容，相對路徑不會被webpack的file-loader處理。

編譯后，資源目錄assets結構已變，而代碼的目錄沒變，所以相對路徑這種方式不行，而絕對路徑沒有問題

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: