vue.js引用背景圖background無效的3種解決方案
＃vue.js項(xiàng)目中，出現(xiàn)css調(diào)用background背景圖無效？如何解決？
或者調(diào)用<img>標(biāo)簽，也無效果？
直接上代碼，自行對比查找一下：
效果圖預(yù)覽
1. 正確的代碼，示例如下
<template>
<div class="demo">
<!-- 成功引入的三種方法： -->
<!-- 圖1 -->
<div class="img1"></div>
<!-- 圖2 -->
<div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
<!-- 圖3 -->
<img src="~@/../static/images/logo3.png" width="100">
</div>
</template>
<script>
import Bg2 from '@/../static/images/logo2.png'
export default {
name: 'App',
data () {
return {
bg2: Bg2,
}
}
}
</script>
<style>
.demo{width: 100px;margin: 50px auto;}
.img1{
width: 100px;
height: 100px;
background: url('~@/../static/images/logo1.png') center center no-repeat;
background-size: 100px auto;
}
.img2{
width: 100px;
height: 100px;
background-position: center center;
background-repeat: no-repeat;
background-size: 100px auto;
}
</style>
上述代碼中，出現(xiàn)了諸如：~@/和 @/，如果刪除后，測試效果也正常，你也可以都去掉，不影響。
2. 錯(cuò)誤的代碼，截圖對比
如下：
報(bào)錯(cuò)結(jié)果截圖如下：
修改為正確代碼方法，類比如下：
<div :style="{backgroundImage: 'url(https://cn.vuejs.org/images/logo.png)', width: '400px', height: '400px'}">foo</div>
具體參考官方文檔：Class 與 Style 綁定
相比其他方法：
如果你用了vue-cli腳手架，在build/utils.js中找到ExtractTextPlugin位置在對象中加入這句publicPath: '../../'就行了(本人未測試)。
其他未測試到的狀況，本文暫不深入發(fā)掘，如有發(fā)現(xiàn)另類bug，后續(xù)將會(huì)補(bǔ)充。
vue添加背景圖沒反應(yīng)
table需要添加背景圖，添加backgroundImage后發(fā)現(xiàn)不起作用，于是網(wǎng)上一番搜索，發(fā)現(xiàn)加了require后就好了
backgroundImage: ‘url(’ + require(‘圖片地址’) + ‘)’,原來vue中的js引入圖片，必須require進(jìn)來。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請求的問題
這篇文章主要介紹了在vue項(xiàng)目中promise解決回調(diào)地獄和并發(fā)請求的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
vue src動(dòng)態(tài)加載請求獲取圖片的方法
這篇文章主要為大家詳細(xì)介紹了vue src動(dòng)態(tài)加載請求獲取圖片的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
關(guān)于element-ui?單選框默認(rèn)值不選中的解決
這篇文章主要介紹了關(guān)于element-ui?單選框默認(rèn)值不選中的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue如何使用router.meta.keepAlive對頁面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對頁面進(jìn)行緩存問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue解決跨域問題，本文通過實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了uni-app 的自定義組件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
為了方便大家寫代碼，Vue給大家提供了很多方便的修飾符，比如我們經(jīng)常用到的取消冒泡，阻止默認(rèn)事件等等，這篇文章將給大家分享Vue?中的常用的修飾符2022-10-10
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
Vue項(xiàng)目如何保持用戶登錄狀態(tài)(localStorage+vuex刷新頁面后狀態(tài)依然保持)
關(guān)于vue登錄注冊,并保持登錄狀態(tài),是vue玩家必經(jīng)之路,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何保持用戶登錄狀態(tài)的相關(guān)資料,localStorage+vuex刷新頁面后狀態(tài)依然保持,需要的朋友可以參考下2022-05-05
EasyPlayer.js是集播放http-flv,?hls,?websocket?于一身的H5視頻直播/視頻點(diǎn)播播放器,?使用簡單,?功能強(qiáng)大，下面大家就跟隨小編一起學(xué)習(xí)一下它的具體使用吧2023-08-08