解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題

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

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

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);

如果都有其中一種，恭喜你都錯了~~~

VUE會在命令行給你出現(xiàn)報錯，比如這樣：

而瀏覽器也會給你溫馨提示：

在less當中當中給元素設置背景圖‘ '是必須加的，而且變量必須是@{ 變量名 }這樣的格式去書寫，在@{ 變量名 }后面不允許出現(xiàn)@符號 否則會出現(xiàn)報錯，因為他在編譯過程中會認為你@{ 變量名 }后面的@符號是一個變量，并且檢測到你的變量未規(guī)范書寫URL里面的要求。所以使用less在給元素添加背景圖設置URL時安裝下面這個寫法就可以完美實現(xiàn)無報錯

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

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

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

網(wǎng)站名稱：解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
本文網(wǎng)址：http://bm7419.com/article22/ipoojc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設、網(wǎng)站設計、定制網(wǎng)站、靜態(tài)網(wǎng)站、手機網(wǎng)站建設、網(wǎng)站導航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)