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