Vue在css中圖片路徑問題解決的配置方法
css外設(shè)置background-image
在css外設(shè)置background-image時(shí)，不能直接使用url，應(yīng)該使用
<li :style="'background-image:url(require('./../assets/banner_top2.png'))'"></li>在css中設(shè)置background-image時(shí)，使用相對(duì)路徑在webpack打包后出現(xiàn)問題，圖片路徑到了static下
在build/util.js中配置publicPath：“../../”
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})
webpack對(duì)css文件打包時(shí)會(huì)驗(yàn)證圖片資源是否獲取成功，若找不到資源文件，就會(huì)報(bào)錯(cuò)。同時(shí)注釋的資源圖片也會(huì)進(jìn)行檢查。
在webpack.base.conf.js中使用別名（resolve.alias）解決scss @import相對(duì)路徑問題(webpack5以上版本會(huì)自動(dòng)配置@為當(dāng)前目錄src)：
當(dāng)遇到樣式過(guò)多時(shí)或者公共樣式，我們會(huì)將樣式單獨(dú)寫在一個(gè)文件夾common.scss;
配置別名：@相當(dāng)于目錄src
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
}兩種引入方式
在js中：
//原來(lái)是這樣寫 import './../src/scss/common.scss'; //定義別名后可以這樣寫 import '@/scss/common.scss';
在scss文件中：注意在這里需要加~在@符號(hào)前面
//原本這樣寫 @import './../scss/common.scss'; //現(xiàn)在這樣寫 @import '~@/scss/common.scss';
使用別名不僅簡(jiǎn)單方便，同時(shí)避免了相對(duì)路徑使用時(shí)出現(xiàn)的問題，例如在a.scss文件中引入b.scss
//a.scss
@import '@/scss/module/b.scss';
//b.scss
div{
background-image: url('~@/assets/images/1.png');
}
這時(shí)再在另外的文件中引入a.scss，則b文件中的圖片資源的相對(duì)路徑就會(huì)改變，找不到資源圖片報(bào)錯(cuò)。如果使用上面方法則會(huì)避免這些錯(cuò)誤。
注意：如果你的引入的樣式文件格式為scss則，在style標(biāo)簽上應(yīng)設(shè)置：（css，less等同理，在js中引入沒有這個(gè)顧慮）
<style lang="scss" scoped>
@import '~@/styles/register/main.scss';
</style>為了避免不必要的錯(cuò)誤，最好在css中引入css樣式，scss中引入scss樣式，不要混淆。
以上就是Vue在css中圖片路徑問題解決的詳細(xì)內(nèi)容，更多關(guān)于Vue css圖片路徑的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue3組件庫(kù)Shake抖動(dòng)組件搭建過(guò)程詳解
這篇文章主要為大家介紹了vue3組件庫(kù)Shake抖動(dòng)組件搭建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue中頁(yè)面跳轉(zhuǎn)攔截器的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue中頁(yè)面跳轉(zhuǎn)攔截器的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08
Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
今天小編就為大家分享一篇vue.js 添加 fastclick的支持方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
element使用自定義icon圖標(biāo)的兩種解決方式
因?yàn)榘惭b原型圖設(shè)計(jì)實(shí)現(xiàn)頁(yè)面,在element自帶的圖標(biāo)庫(kù)好像沒有,所以按鈕的圖標(biāo)icon需要自定義,下面這篇文章主要給大家介紹了關(guān)于element使用自定義icon圖標(biāo)的兩種解決方式,需要的朋友可以參考下2022-07-07
vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑
這篇文章主要介紹了vue如何移動(dòng)到指定位置(scrollIntoView)親測(cè)避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案
這篇文章主要給大家介紹了關(guān)于npm?ERR!?code?E404在vscode安裝插件時(shí)報(bào)錯(cuò)的兩種解決方案,關(guān)于這個(gè)問題,通常是由于插件名稱輸入錯(cuò)誤、網(wǎng)絡(luò)問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了VUEX-action可以修改state嗎，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目中監(jiān)聽手機(jī)物理返回鍵的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
實(shí)現(xiàn)一個(gè)簡(jiǎn)單的vue無(wú)限加載指令方法
vue 中的自定義指令是對(duì)底層 dom 進(jìn)行操作，下面以實(shí)現(xiàn)滾動(dòng)到底部加載數(shù)據(jù)，實(shí)現(xiàn)無(wú)限加載來(lái)介紹如何自定義一個(gè)簡(jiǎn)單的指令。2017-01-01