解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題
更新時間：2018年09月03日 08:42:14 作者：豆i漿
今天小編就為大家分享一篇解決Vue2.0中使用less給元素添加背景圖片出現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
在使用less在Vue.js中給元素添加背景圖片時 或者你會出現(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);
如果都有其中一種，恭喜你都錯了~~~
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)的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue實現(xiàn)自定義字段導出EXCEL的示例代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
我們在開發(fā)的時候會經常用的導出excel表格功能,剛好自己開發(fā)有遇到,就記錄一下,下面這篇文章主要給大家介紹了關于Vue前端表格導出Excel文件的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了詳細解讀VUE父子組件的使用,今天來講一種子父組件深度耦合的方式，使我們不用額外的創(chuàng)建新的組件，也可以達到一些效果，下面與你們分享一下2023-05-05
這篇文章主要介紹了Vue項目開發(fā)常見問題和解決方案總結，幫助大家更好的利用vue開發(fā)，感興趣的朋友可以了解下2020-09-09
插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。2020-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇Vue3開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語法，文中的示例代碼講解詳細，希望所有像他一樣還不熟的伙伴快速上手 Vue3，不會的再不看要遭老罪咯2023-04-04
本篇文章主要介紹了解析Vue2.0雙向綁定實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要給大家介紹了關于Vue組件通信的四種方式，分別是父子組件通信、非父子組件的eventBus通信、利用localStorage或者sessionStorage以及利用Vuex等方法，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。2018-02-02
本篇文章主要介紹了vue2.0路由配置問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07