在使用less在Vue.js中給元素添加背景圖片時(shí) 或者你會(huì)出現(xiàn)這樣的寫法

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比金塔網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式金塔網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋金塔地區(qū)。費(fèi)用合理售后完善，10多年實(shí)體公司更值得信賴。

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過(guò)程中會(huì)認(rèn)為你@{ 變量名 }后面的@符號(hào)是一個(gè)變量，并且檢測(cè)到你的變量未規(guī)范書寫URL里面的要求。所以使用less在給元素添加背景圖設(shè)置URL時(shí)安裝下面這個(gè)寫法就可以完美實(shí)現(xiàn)無(wú)報(bào)錯(cuò)

background-image: url('../img/@{bg_url}2x.png');

在使用less設(shè)置背景圖使用變量時(shí)，盡量避免圖片名稱帶有@符號(hào)，以減少不必要的麻煩！

以上這篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。