Vue3中background-image:url()不顯示問題及解決過程
更新時(shí)間：2025年08月20日 11:40:44 作者：真砂4丁目
在Vue3中,直接在div的style屬性內(nèi)寫背景圖片樣式無(wú)法顯示,可能因樣式綁定語(yǔ)法或作用域問題,將樣式移至CSS類并正確應(yīng)用后解決,建議檢查樣式綁定格式及CSS作用域配置
問題描述
使用vue3時(shí)想給一個(gè)div設(shè)置背景圖片
一開始把background-image:url(xxx/xxx.png)寫在了div的style里，背景圖片怎么也顯示不出來(lái)
圖片路徑也確認(rèn)過沒有問題。
解決方案
給div添加了class屬性，并把background-image:url(xxx/xxx.png)改寫到<style></style>中
背景就可以顯示了
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue實(shí)現(xiàn)動(dòng)態(tài)綁定行內(nèi)樣式style的backgroundImage
- vue :style設(shè)置背景圖片方式backgroundImage
- Vue一個(gè)動(dòng)態(tài)添加background-image的實(shí)現(xiàn)
- vue?scss后綴文件background-image路徑錯(cuò)誤的解決
- vue?background-image?不顯示問題的解決
- vue踩坑之backgroundImage路徑問題及解決
- vue.js動(dòng)態(tài)修改background-image問題
- vue的style綁定background-image的方式和其他變量數(shù)據(jù)的區(qū)別詳解
相關(guān)文章
關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式
這篇文章主要介紹了關(guān)于應(yīng)用UI組件的移動(dòng)端適配方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue項(xiàng)目部署上線遇到的問題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-06-06
Vue2集成ElementUI實(shí)現(xiàn)左側(cè)菜單導(dǎo)航功能
本文主要記錄兩個(gè)菜單的生成方式,通過在前端router/index.js中直接進(jìn)行配置,后端返回菜單數(shù)據(jù)進(jìn)行對(duì)應(yīng),可以通過后端返回的菜單數(shù)據(jù)控制權(quán)限,另一種是部門靜態(tài)導(dǎo)航,然后再拼接動(dòng)態(tài)導(dǎo)航,生成完成頁(yè)面導(dǎo)航,感興趣的朋友一起看看吧2025-04-04
vue中如何使用xlsx讀取excel文件實(shí)例代碼
在Vue中使用xlsx庫(kù)可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關(guān)于vue中如何使用xlsx讀取excel文件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
這篇文章主要為大家詳細(xì)介紹了自帶氣泡提示的vue校驗(yàn)插件，vue-verify-pop的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解
下面小編就為大家?guī)?lái)一篇vue 實(shí)現(xiàn) tomato timer(蕃茄鐘)實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2017-07-07
vuex模塊獲取數(shù)據(jù)及方法的簡(jiǎn)單示例
Vuex是一個(gè)專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于vuex模塊獲取數(shù)據(jù)及方法的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了如何寫一個(gè)Vue loading 插件，幫助大家更好的理解和學(xué)習(xí)vue 插件的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了VueCli3中兼容IE11配置的艱苦歷程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了用Vue編寫抽象組件的方法,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05