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)文章
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端.這篇文章主要介紹了vue/axios請求攔截的相關(guān)知識,需要的朋友可以參考下2018-03-03
在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開發(fā)三維地圖的詳細(xì)過程,Cesium是一個強大的JavaScript庫,支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下2023-12-12
詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli）
本篇文章主要介紹了詳解vue2.0 使用動態(tài)組件實現(xiàn) Tab 標(biāo)簽頁切換效果（vue-cli），具有一定的參考價值，有需要的可以了解下2017-08-08
這篇文章主要介紹了vue項目配置使用flow類型檢查的步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue實現(xiàn)原理this.$message實例詳解
這篇文章主要介紹了vue實現(xiàn)原理this.$message實例詳解,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue背景圖片路徑問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vuex的幾個屬性及其使用傳參,本文結(jié)合實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11