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標(biāo)簽里面寫樣式隨著目錄的深入有可能引用路徑是：
background: url("../../../images/banner.jpg") no-repeat;
有個做法似乎可以省去一些麻煩：
把樣式文件統(tǒng)一放到style文件夾里面，樣式圖片資源用相對路徑，然后在style標(biāo)簽用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)文章
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue服務(wù)端渲染頁面緩存和組件緩存的介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下2018-09-09
這篇文章主要為大家詳細介紹了vue仿寫帶過渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
vue3使用threejs實現(xiàn)3D卡片水平旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實現(xiàn)3D卡片水平旋轉(zhuǎn)效果,文中通過代碼示例講解的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例
這篇文章主要介紹了Vue中使用ElementUI使用第三方圖標(biāo)庫iconfont的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
路由權(quán)限控制常用于后臺管理系統(tǒng)中，對不同業(yè)務(wù)人員能夠訪問的頁面進行一個權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價值，感興趣的可以了解一下2021-10-10
這篇文章主要介紹了react和vue的區(qū)別分析，在面試中經(jīng)常會遇到，小編通過實例文字相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
在Vue中,有兩種類型的自定義指令：局部指令和全局指令,但是除了這些指令?Vue也允許我們自己定義自己的指令,下面我們就來學(xué)習(xí)一下Vue中自定義指令的用法吧2023-08-08
這篇文章主要介紹了Vue自動構(gòu)建發(fā)布腳本的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在使用Element Plus中的table組件展示數(shù)據(jù)時,由于需要對表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04