vue.js動(dòng)態(tài)修改background-image問題
更新時(shí)間：2022年08月25日 09:34:07 作者：Weber_t
這篇文章主要介紹了vue.js動(dòng)態(tài)修改background-image問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue.js動(dòng)態(tài)修改background-image
網(wǎng)上搜羅了一圈都沒找到vue.js動(dòng)態(tài)修改background-image的相關(guān)代碼，找到的都是eslint寫法的。eslint的寫法在js中用不了，直接報(bào)錯(cuò)。最后自己試下了下結(jié)果可以了。
這個(gè)是eslint寫法
<div class="content-wapper" :style="{backgroundImage:'url('+seller.avatar+')'}">這個(gè)是js寫法，嘿嘿，其實(shí)很簡(jiǎn)單，主要是es和js編碼規(guī)則不一樣。加個(gè)轉(zhuǎn)義后的單引號(hào)就行了
<div class="content-wapper" :style="{backgroundImage:'url(\''+seller.avatar+'\')'}">vue中background-image問題
今天在設(shè)置文本框的背景圖片的時(shí)候，遇到一個(gè)問題，就是路徑正確，但是無法正常顯示圖片。如果這個(gè)路徑寫在了css里面，也可以正常顯示，但是寫到HTML里面，無法正常顯示。
如上圖所示，上面的是我寫在模板里的，是該圖片實(shí)際存儲(chǔ)的地址，無法正常顯示。下面的是寫在將紅框內(nèi)的地址寫到css后的結(jié)果，可以看到地址已經(jīng)變了，應(yīng)該是編譯后的地址。
解決方案
圖片地址不需要改變，只需要使用require對(duì)圖片進(jìn)行導(dǎo)入即可。
<input :style="{ 'backgroundImage':'url('+ urlIcon +')' }"/>
this.icon = 'background.jpg'
// 直接required 直接使用 this.icon 引用 '../../assets/background.jpg'路徑會(huì)報(bào)錯(cuò)
this.urlIcon = require('../../assets/'+this.icon)
即可正常顯示。
小結(jié)
- 動(dòng)態(tài)引入背景圖片需要使用require關(guān)鍵字
- require內(nèi)不能使用純變量，可以使用將字符串類型的變量改為拼接字符串
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue-cli3跨域配置的簡(jiǎn)單方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli3具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了vue刷新后瞬間閃爍,無法解析的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了vue組件之間進(jìn)行傳值的方法，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue3過渡動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了在vue里如何使用pug模板引擎,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
最近寫大屏,用到elementplus中的el-table,為了讓顯示效果好看一點(diǎn),需要把表格的白色背景調(diào)整為透明,與整個(gè)背景融為一體,本文給大家介紹ElementPlus表格中的背景透明解決方案,感興趣的朋友一起看看吧2023-10-10
基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要介紹了vuex管理狀態(tài)倉庫使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue如何引用public中的js文件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決
這篇文章主要給大家介紹了關(guān)于vue3+vite+vant項(xiàng)目下按需引入vant報(bào)錯(cuò)Failed?to?resolve?import的原因及解決方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01