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