溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
在使用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è)參考，也希望大家多多支持億速云。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼