vue cli使用絕對(duì)路徑引用圖片問(wèn)題的解決
前言
Vue是什么，是一套構(gòu)建用戶界面的漸進(jìn)式框架（官網(wǎng)解釋），什么叫漸進(jìn)式框架呢，簡(jiǎn)單回答就是主張最少，這些概念只能自己去看，自己去理解，一千個(gè)讀者一千個(gè)哈姆雷特，不過(guò)多的解釋。Vue官方文檔 很全面的。
Vue是近兩年來(lái)比較火的一個(gè)前端框架（漸進(jìn)式框架吧），本文將給大家詳細(xì)介紹vue cli使用絕對(duì)路徑引用圖片問(wèn)題的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看吧。
正文：
在頁(yè)面中使用絕對(duì)路徑可通過(guò)在js中用 require() 引入
data (){
return {
src: require('IMAGES/banner.jpg')
}
}
<img :src="src">
樣式里面似乎無(wú)法使用絕對(duì)路徑，除非把圖片資源都放到static里面，然后就可以這樣引用
background: url("/static/images/banner.jpg") no-repeat;
但，放到static里面webpack打包后只會(huì)把資源復(fù)制到發(fā)布目錄而不會(huì)把小圖片優(yōu)化為base64。
為了兼顧可以把圖片資源優(yōu)化，所以還是不適合把圖片資源放到static，但，在vue頁(yè)面style標(biāo)簽里面寫(xiě)樣式隨著目錄的深入有可能引用路徑是：
background: url("../../../images/banner.jpg") no-repeat;
有個(gè)做法似乎可以省去一些麻煩：
把樣式文件統(tǒng)一放到style文件夾里面，樣式圖片資源用相對(duì)路徑，然后在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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue服務(wù)端渲染頁(yè)面緩存和組件緩存的實(shí)例詳解
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于vue服務(wù)端渲染頁(yè)面緩存和組件緩存的介紹（代碼），有一定的參考價(jià)值，有需要的朋友可以參考一下2018-09-09
vue實(shí)現(xiàn)帶過(guò)渡效果的下拉菜單功能
這篇文章主要為大家詳細(xì)介紹了vue仿寫(xiě)帶過(guò)渡效果的下拉菜單功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
vue3使用threejs實(shí)現(xiàn)3D卡片水平旋轉(zhuǎn)效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實(shí)現(xiàn)3D卡片水平旋轉(zhuǎn)效果,文中通過(guò)代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-04-04
Vue中使用ElementUI使用第三方圖標(biāo)庫(kù)iconfont的示例
這篇文章主要介紹了Vue中使用ElementUI使用第三方圖標(biāo)庫(kù)iconfont的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
解決el-select數(shù)據(jù)量過(guò)大的3種方案
最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問(wèn)題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁(yè)面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
Vue實(shí)現(xiàn)兩種路由權(quán)限控制方式
路由權(quán)限控制常用于后臺(tái)管理系統(tǒng)中，對(duì)不同業(yè)務(wù)人員能夠訪問(wèn)的頁(yè)面進(jìn)行一個(gè)權(quán)限的限制。本文主要介紹了兩種Vue 路由權(quán)限控制，具有一定的參考價(jià)值，感興趣的可以了解一下2021-10-10
這篇文章主要介紹了react和vue的區(qū)別分析，在面試中經(jīng)常會(huì)遇到，小編通過(guò)實(shí)例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
在Vue中,有兩種類型的自定義指令：局部指令和全局指令,但是除了這些指令?Vue也允許我們自己定義自己的指令,下面我們就來(lái)學(xué)習(xí)一下Vue中自定義指令的用法吧2023-08-08
Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例
這篇文章主要介紹了Vue自動(dòng)構(gòu)建發(fā)布腳本的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
在使用Element Plus中的table組件展示數(shù)據(jù)時(shí),由于需要對(duì)表格行內(nèi)數(shù)據(jù)的數(shù)據(jù)進(jìn)行修改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus修改表格行和單元格樣式的相關(guān)資料,需要的朋友可以參考下2022-04-04