資訊專欄INFORMATION COLUMN
摘要：記錄總結(jié)一下的中引入圖片路徑的幾種書寫方式中靜態(tài)資源的引入機(jī)制關(guān)于靜態(tài)資源的官方文檔靜態(tài)資源可以通過兩種方式進(jìn)行處理在被導(dǎo)入或在中通過相對(duì)路徑以開頭被引用。如果是一個(gè)絕對(duì)路徑，例如，它將會(huì)被保留不變。
vue --version 3.6.3
記錄總結(jié)一下的Vue中引入圖片路徑的幾種書寫方式
Vue.js關(guān)于靜態(tài)資源的官方文檔
靜態(tài)資源可以通過兩種方式進(jìn)行處理：
在 JavaScript 被導(dǎo)入或在 template/CSS 中通過相對(duì)路徑(以 . 開頭)被引用。這類引用會(huì)被 webpack 處理。
諸如 、background: url(...) 和 CSS @import 的資源
寫在 template 中內(nèi)聯(lián) style 的 background: url(...) 樣式，在當(dāng)前版本的測(cè)試中，即使使用了相對(duì)路徑也不會(huì)被webpack處理
例如，url(./image.png) 會(huì)被翻譯為 require("./image.png")
放置在 public 目錄下或通過絕對(duì)路徑被引用。這類資源將會(huì)直接被拷貝，而不會(huì)經(jīng)過 webpack 的處理，你需要通過絕對(duì)路徑來引用它們。
如果 URL 是一個(gè)絕對(duì)路徑，例如 /images/foo.png ，它將會(huì)被保留不變。
目錄結(jié)構(gòu)：vue-path/引入示例
----- public/
-------- images/
------------ XX.jpg
----- src/
-------- assets/
------------ images/
---------------- XX.jpg
-------- App.vue
...
App.vue:
√
// √ // 編譯后:
常見的引入方式，路徑是固定的字符串，圖片會(huì)被webpack處理，文件若丟失會(huì)直接在編譯時(shí)報(bào)錯(cuò)，生成的文件包含了哈希值
×
// -
// 編譯后:
