解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
更新時(shí)間：2018年09月03日 08:42:14 作者：豆i漿
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
在使用less在Vue.js中給元素添加背景圖片時(shí) 或者你會(huì)出現(xiàn)這樣的寫法
background-image: url('../img/' + @{bg_url} + '2x.png');
或者這樣
background-image: url('../img/' + @bg_url + '2x.png');
這樣
background-image: url(../img/@{bg_url}2x.png);
還有這樣
background-image: url(../img/@bg_url2x.png);
這樣的
background-image: url(../img/@{bg_url}@2x.png);
如果都有其中一種，恭喜你都錯(cuò)了~~~
VUE會(huì)在命令行給你出現(xiàn)報(bào)錯(cuò)，比如這樣：
而瀏覽器也會(huì)給你溫馨提示：
在less當(dāng)中當(dāng)中給元素設(shè)置背景圖‘ '是必須加的，而且變量必須是@{ 變量名 }這樣的格式去書寫，在@{ 變量名 }后面不允許出現(xiàn)@符號(hào) 否則會(huì)出現(xiàn)報(bào)錯(cuò)，因?yàn)樗诰幾g過程中會(huì)認(rèn)為你@{ 變量名 }后面的@符號(hào)是一個(gè)變量，并且檢測(cè)到你的變量未規(guī)范書寫URL里面的要求。所以使用less在給元素添加背景圖設(shè)置URL時(shí)安裝下面這個(gè)寫法就可以完美實(shí)現(xiàn)無報(bào)錯(cuò)
background-image: url('../img/@{bg_url}2x.png');
在使用less設(shè)置背景圖使用變量時(shí)，盡量避免圖片名稱帶有@符號(hào)，以減少不必要的麻煩！
以上這篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)自定義字段導(dǎo)出EXCEL的示例代碼,代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
我們?cè)陂_發(fā)的時(shí)候會(huì)經(jīng)常用的導(dǎo)出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關(guān)于Vue前端表格導(dǎo)出Excel文件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了詳細(xì)解讀VUE父子組件的使用,今天來講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達(dá)到一些效果，下面與你們分享一下2023-05-05
Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié)
這篇文章主要介紹了Vue項(xiàng)目開發(fā)常見問題和解決方案總結(jié)，幫助大家更好的利用vue開發(fā)，感興趣的朋友可以了解下2020-09-09
插槽（Slot）是Vue提出來的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇Vue3開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語法，文中的示例代碼講解詳細(xì)，希望所有像他一樣還不熟的伙伴快速上手 Vue3，不會(huì)的再不看要遭老罪咯2023-04-04
本篇文章主要介紹了解析Vue2.0雙向綁定實(shí)現(xiàn)原理，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要給大家介紹了關(guān)于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-02-02
本篇文章主要介紹了vue2.0路由配置問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07