vue cli使用絕對路徑引用圖片問題的解決
前言
Vue是什么，是一套構(gòu)建用戶界面的漸進式框架（官網(wǎng)解釋），什么叫漸進式框架呢，簡單回答就是主張最少，這些概念只能自己去看，自己去理解，一千個讀者一千個哈姆雷特，不過多的解釋。Vue官方文檔 很全面的。
Vue是近兩年來比較火的一個前端框架（漸進式框架吧），本文將給大家詳細介紹vue cli使用絕對路徑引用圖片問題的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看吧。
正文：
在頁面中使用絕對路徑可通過在js中用 require() 引入
data (){
return {
src: require('IMAGES/banner.jpg')
}
}
<img :src="src">
樣式里面似乎無法使用絕對路徑，除非把圖片資源都放到static里面，然后就可以這樣引用
background: url("/static/images/banner.jpg") no-repeat;
但，放到static里面webpack打包后只會把資源復(fù)制到發(fā)布目錄而不會把小圖片優(yōu)化為base64。
為了兼顧可以把圖片資源優(yōu)化，所以還是不適合把圖片資源放到static，但，在vue頁面style標簽里面寫樣式隨著目錄的深入有可能引用路徑是：
background: url("../../../images/banner.jpg") no-repeat;
有個做法似乎可以省去一些麻煩：
把樣式文件統(tǒng)一放到style文件夾里面，樣式圖片資源用相對路徑，然后在style標簽用src屬性引入樣式，這樣就可以避免太多層的返回了~~~
── src ── images ── banner.jpg ── style ── index.scss
/*style*/
background: url("../images/banner.jpg") no-repeat;
<style src="STYLE/index" lang="scss"></style>
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue3中正確使用ElementPlus的示例代碼,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
基于Vue實現(xiàn)的多條件篩選功能的詳解(類似京東和淘寶功能)
這篇文章主要介紹了Vue多條件篩選功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父傳子)的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類型檢查和默認值設(shè)置,文中將用法介紹的非常詳細,需要的朋友可以參考下2024-10-10
vue使用html2PDF實現(xiàn)將內(nèi)容導(dǎo)出為PDF
將 HTML 轉(zhuǎn)換為 PDF 進行下載是一個比較常見的功能,這篇文章將通過html2PDF實現(xiàn)將頁面內(nèi)容導(dǎo)出為PDF,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
徹底搞懂并解決vue-cli4中圖片顯示的問題實現(xiàn)
這篇文章主要介紹了徹底搞懂并解決vue-cli4中圖片顯示的問題，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
vue.config.js中configureWebpack與chainWebpack區(qū)別及說明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue如何動態(tài)配置ip與端口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue項目判斷開發(fā)、測試、正式環(huán)境過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue-router路由模式詳解(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題
這篇文章主要介紹了vue3.0 Reactive數(shù)據(jù)更新頁面沒有刷新的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04