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)變了，應該是編譯后的地址。
解決方案
圖片地址不需要改變，只需要使用require對圖片進行導入即可。
<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)文章
這篇文章主要介紹了在Vuex中Mutations修改狀態(tài)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue backtop組件的實現(xiàn)完整代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
解讀element?el-upload上傳的附件名稱不顯示?file-list賦值
這篇文章主要介紹了解讀element?el-upload上傳的附件名稱不顯示?file-list賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了vue的h5日歷組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要介紹了vue框架render方法如何替換template，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
TinyMCE Vue是TinyMCE官方發(fā)布的Vue組件，可以更輕松地在Vue應用程序中使用TinyMCE，這篇文章主要介紹了vue中tinymce的使用,需要的朋友可以參考下2022-11-11
淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別
本文主要介紹了淺談vue3中ref、toRef、toRefs?和?reactive的區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
Vue的Router是一個用于實現(xiàn)頁面跳轉(zhuǎn)和路由管理的插件,它可以幫助我們根據(jù)不同的URL請求加載不同的組件,以及實現(xiàn)前端路由功能,本文給大家介紹vue中的Router基本配置命令,感興趣的朋友跟隨小編一起看看吧2024-02-02
uniapp微信小程序webview和h5數(shù)據(jù)通信代碼示例
這篇文章主要介紹了uniapp微信小程序webview和h5數(shù)據(jù)通信的相關(guān)資料,文章還列出了項目的結(jié)構(gòu),包括微信小程序和h5端的主要文件和組件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-01-01
Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例
這篇文章主要介紹了Vue+Element一步步實現(xiàn)動態(tài)添加Input_輸入框案例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09