vue?background-image?不顯示問題的解決
更新時(shí)間：2022年10月12日 10:32:09 作者：念舊、sunshine
這篇文章主要介紹了vue?background-image?不顯示問題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue background-image 不顯示
1、不能放到assets中 。static文件在src目錄下。也可以將文件放到public
2、路徑前面一定要對(duì)。../
3、 width: 100%;height: 100%;只是根據(jù)內(nèi)容來展示大小。圖片并不能百分百顯示。需要加position；否則看不到圖片
.container {
? width: 100%;
? height: 100%;
? ?position:fixed;
? ? top: 0;
? ? left: 0;
? background:url('../static/background.png') no-repeat;
}在img中可以：
<img src="~assets/img/background.png" width="596px" height="427px"/>
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)文章
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個(gè)生命周期鉤子，接下來通過本文給大家詳細(xì)介紹Vue指令工作原理實(shí)現(xiàn)方法，需要的朋友參考下吧2021-06-06
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義多選按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決
這篇文章主要介紹了vue elementUI select下拉框設(shè)置默認(rèn)值(賦值)失敗的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了使用github部署前端vue項(xiàng)目過程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)
這篇文章主要介紹了vue父組件監(jiān)聽子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js進(jìn)階知識(shí)點(diǎn)總結(jié)
給大家分享了關(guān)于Vue.js想成為高手的5個(gè)總要知識(shí)點(diǎn)，需要的朋友可以學(xué)習(xí)下。2018-04-04
vue watch監(jiān)控對(duì)象的簡單方法示例
這篇文章主要給大家介紹了關(guān)于vue watch監(jiān)控對(duì)象的簡單方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式
本文通過示例代碼介紹了vue時(shí)間戳和時(shí)間的相互轉(zhuǎn)換方式,通過場景分析介紹了vue3使用組合式api將時(shí)間戳格式轉(zhuǎn)換成時(shí)間格式（2023年09月28日 10:00）,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了在IDEA中安裝vue插件全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認(rèn)插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-04-04