vue.js引用背景圖background無效的3種解決方案
＃vue.js項(xiàng)目中，出現(xiàn)css調(diào)用background背景圖無效？如何解決？
或者調(diào)用<img>標(biāo)簽，也無效果？
直接上代碼，自行對(duì)比查找一下：
效果圖預(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)了諸如：~@/和 @/，如果刪除后，測(cè)試效果也正常，你也可以都去掉，不影響。
2. 錯(cuò)誤的代碼，截圖對(duì)比
如下：
報(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位置在對(duì)象中加入這句publicPath: '../../'就行了(本人未測(cè)試)。
其他未測(cè)試到的狀況，本文暫不深入發(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網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式介紹
這篇文章主要介紹了Vue網(wǎng)絡(luò)請(qǐng)求的三種實(shí)現(xiàn)方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要介紹了vue按需引入element Transfer 穿梭框的相關(guān)資料,需要的朋友可以參考下2017-09-09
Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)圓環(huán)進(jìn)度條的示例，幫助大家更好的理解和使用前端框架進(jìn)行開發(fā)，感興趣的朋友可以了解下2021-02-02
Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法(推薦)
vue router給我們提供了兩種頁面間傳遞參數(shù)的方式,一種是動(dòng)態(tài)路由匹配，一種是編程式導(dǎo)航，接下來通過本文給大家介紹Vue 頁面狀態(tài)保持頁面間數(shù)據(jù)傳輸?shù)囊环N方法,需要的朋友可以參考下2018-11-11
使用Vue實(shí)現(xiàn)點(diǎn)擊按鈕小球加入購物車動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何使用Vue實(shí)現(xiàn)點(diǎn)擊按鈕小球加入購物車動(dòng)畫,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue form表單使用resetFields函數(shù)出現(xiàn)的問題
這篇文章主要介紹了vue form表單使用resetFields函數(shù)出現(xiàn)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇淺談在vue中使用mint-ui swipe遇到的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法
這篇文章主要介紹了vue使用map代替Aarry數(shù)組循環(huán)遍歷的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3中props傳參方式（多種數(shù)據(jù)類型傳參方式）的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11