Vue.js中引入圖片路徑的幾種方式

adam1q84 發布于2019-08-23 18:09 / 1820人閱讀

摘要：記錄總結一下的中引入圖片路徑的幾種書寫方式中靜態資源的引入機制關于靜態資源的官方文檔靜態資源可以通過兩種方式進行處理在被導入或在中通過相對路徑以開頭被引用。如果是一個絕對路徑，例如，它將會被保留不變。

vue --version 3.6.3
記錄總結一下的Vue中引入圖片路徑的幾種書寫方式

vue中靜態資源的引入機制

Vue.js關于靜態資源的官方文檔

靜態資源可以通過兩種方式進行處理：

在 JavaScript 被導入或在 template/CSS 中通過相對路徑(以 . 開頭)被引用。這類引用會被 webpack 處理。

諸如、background: url(...) 和 CSS @import 的資源

寫在 template 中內聯 style 的 background: url(...) 樣式，在當前版本的測試中，即使使用了相對路徑也不會被webpack處理

例如，url(./image.png) 會被翻譯為 require("./image.png")

放置在 public 目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過 webpack 的處理，你需要通過絕對路徑來引用它們。

如果 URL 是一個絕對路徑，例如 /images/foo.png ，它將會被保留不變。

目錄結構：

vue-path/
----- public/
-------- images/
------------ XX.jpg
----- src/
-------- assets/
------------ images/
---------------- XX.jpg
-------- App.vue
...

引入示例

App.vue:

√

 // √
// 編譯后:

常見的引入方式，路徑是固定的字符串，圖片會被webpack處理，文件若丟失會直接在編譯時報錯，生成的文件包含了哈希值

 // ×
// 編譯后:

錯誤的引入方式，使用:src調用了v-bind指令處理其內容，相對路徑不會被webpack的file-loader處理

√

 // √
 // √
 // √

// 編譯后:

當路徑的文件名需要拼接變量的時候，可使用 require() 引入，在 template 的:src 或者 script 的 data computed 中都可以進行 require 引入或拼接

≈

 // -
// 編譯后:

用絕對路徑引入時，路徑讀取的是public文件夾中的資源，任何放置在 public 文件夾的靜態資源都會被簡單的復制到編譯后的目錄中，而不經過 webpack特殊處理。
當你的應用被部署在一個域名的根路徑上時，比如http://www.abc.com/，此時這種引入方式可以正常顯示
但是如果你的應用沒有部署在域名的根部，那么你需要為你的 URL 配置 publicPath 前綴
publicPath 是部署應用包時的基本 URL，在 vue.config.js 中進行配置，詳情參閱官方文檔

√

 // √
// 編譯后:

vue.config.js中:

//vue.config.js
module.exports = {
    publicPath:"/foo/",
    ...
}

引入publicPath并且將其拼接在路徑中，實現引入路徑的動態變動

reference

https://cli.vuejs.org/zh/guid...
https://cli.vuejs.org/zh/conf...
https://www.cnblogs.com/xiaoj...

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創建對象的幾種方式最基本的幾種

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104768.html

前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

li21 2019-08-23 17:11 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

AaronYuan 2019-07-31 10:21 評論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢

摘要：子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法，子組件通過觸發事件，回調給父組件。非父子組件兄弟組件之間的數據傳遞非父子組件通信，官方推薦使用一個實例作為中央事件總線。寫在前面因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/answ...

Profeel 2019-08-21 17:11 評論0 收藏0
前端面試題總結（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

摘要：并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。本文是關注微信小程序的開發和面試問題，由基礎到困難循序漸進，適合面試和開發小程序。并總結vue React html css js 經典面試題集各種算法和插件、前端視頻源碼資源于一身的文檔，優化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

pumpkin9 2019-08-23 17:12 評論0 收藏0