vue?scss后綴文件background-image路徑錯(cuò)誤的解決
更新時(shí)間：2022年12月07日 14:25:42 作者：門前大橋下www
這篇文章主要介紹了vue?scss后綴文件background-image路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
scss后綴文件background-image路徑錯(cuò)誤
問(wèn)題
scss文件下，圖片路徑報(bào)錯(cuò)
解決辦法
路徑前添加 ~
.empty {
? background-image: url("~@imgs/empty.png");
}@import "../style/lines.scss" 導(dǎo)致background: url()路徑無(wú)效
解決方案是在webpack 中的vue.config.js中配置
configureWebpack: config => {
let obj = {};
obj.resolve = {
alias: {
'img': '@/assets/img',
}
};
return obj
}然后在lines.scss中如下使用
.L-arrows{
width: 10px;
height: 19px;
background: url("~img/arrows.png") no-repeat center;
background-size: cover;
overflow: hidden;
margin: 0px 10px 0px 20px;
}方法二：
<div class="test_img"></div> <style scoped lang="scss"> $img:"../assets/img"; @import "./style/test.scss"; </style>
在 test.scss中 代碼如下
.test_img{
width: 100%;
height: 200px;
background: url('#{$img}/alipay.png') no-repeat center;
background-size: cover;
}
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue使用swiper.js重疊輪播組建樣式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了vue中render函數(shù)的使用詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue+NodeJS實(shí)現(xiàn)大文件上傳的示例代碼
常見的文件上傳方式可能就是new一個(gè)FormData，把文件append進(jìn)去以后post給后端就可以了。但如果采用這種方式來(lái)上傳大文件就很容易產(chǎn)生上傳超時(shí)的問(wèn)題。所以本文將利用Vue+NodeJS實(shí)現(xiàn)大文件上傳，需要的可以參考一下2022-05-05
vue3配置代理實(shí)現(xiàn)axios請(qǐng)求本地接口返回PG庫(kù)數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue3配置代理實(shí)現(xiàn)axios請(qǐng)求本地接口返回PG庫(kù)數(shù)據(jù)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-03-03
Vue自定義Hook實(shí)現(xiàn)簡(jiǎn)化本地存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)使用 Vue 3 的 Composition API 創(chuàng)建一個(gè)強(qiáng)大而靈活的自定義 Hook,簡(jiǎn)化了在 localStorage 或 sessionStorage 中管理數(shù)據(jù)的流程,需要的可以參考下2023-12-12
Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語(yǔ)言兼容
這篇文章主要介紹了Vue如何基于vue-i18n實(shí)現(xiàn)多國(guó)語(yǔ)言兼容,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法
這篇文章主要介紹了Vue項(xiàng)目中quill-editor帶樣式編輯器的使用方法，可以更改插入圖片和視頻，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue element-ui導(dǎo)航實(shí)現(xiàn)全屏/取消全屏功能
這篇文章主要介紹了vue element-ui導(dǎo)航實(shí)現(xiàn)全屏/取消全屏功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
簡(jiǎn)易Vue評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))
本篇文章主要介紹了簡(jiǎn)易 Vue 評(píng)論框架的實(shí)現(xiàn)(父組件的實(shí)現(xiàn))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
這篇文章主要介紹了基于iview的router常用控制方式,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05