vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決
更新時(shí)間：2022年08月25日 10:13:01 作者：東之健大壞蛋
這篇文章主要介紹了vue中img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
img或元素背景圖片無(wú)法顯示或路徑錯(cuò)誤
1.在給vue中img元素動(dòng)態(tài)綁定圖片路徑時(shí)會(huì)顯示不出來(lái)圖片：
<span>普通:</span><img src="./video.png" alt="" srcset=""> <span>動(dòng)態(tài)綁定:</span><img :src="'./video.png'" alt="" srcset="">
2.解決方案：使用require或import：
<span>require1:</span><img :src="require('./video.png')">
<span>require2:</span><img :src="img1">
<span>import:</span><img :src="img2">
import img1 from './video.png'
export default {
data() {
return {
img1: img1,
img2: require('./video.png')
}
}
}
3.同理給元素綁定背景圖片也是使用這種方式：
<i :style="`background-image: url( ${require('./video.png')} )`"></i>
背景圖片打包后出現(xiàn)的路徑引用錯(cuò)誤問(wèn)題
在本地寫(xiě)好的頁(yè)面，測(cè)試展示效果都是正常的，經(jīng)過(guò) 打包后，背景圖片不展示，經(jīng)過(guò)排查后，發(fā)現(xiàn)是引用路徑有問(wèn)題。
<div :style="logo"></div>
data(){
?? ?return{
?? ??? ?logo: {
? ? ? ? ?? ?backgroundImage: "url(" + require("../../../images/logo.png") + ")", // 背景圖片
? ? ? ? ?? ?backgroundRepeat: "no-repeat",?
? ? ? ? ?? ?backgroundSize: "50% 100%",
? ? ? ? ?? ?backgroundPosition: "center",
? ? ? },
?? ?}
}修改后，在經(jīng)過(guò)打包部署，背景圖片就可以正常顯示了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何重置data、組件中的data為什么是一個(gè)函數(shù)、為什么new Vue里的data可以是一個(gè)對(duì)象，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)易選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法
這篇文章主要介紹了mpvue項(xiàng)目中使用第三方UI組件庫(kù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要為大家詳細(xì)介紹了vue遞歸實(shí)現(xiàn)樹(shù)形組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問(wèn)題
這篇文章主要介紹了vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中vant組件樣式失效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue如何通過(guò)button的disabled控制按鈕能否被使用
這篇文章主要介紹了vue如何通過(guò)button的disabled控制按鈕能否被使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址
這篇文章主要介紹了vue項(xiàng)目怎樣用nginx反向代理WebSocket請(qǐng)求地址問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法
下面小編就為大家分享一篇Vue-cli中為單獨(dú)頁(yè)面設(shè)置背景色的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
自己最近做項(xiàng)目的時(shí)候遇到需要下載文件的需求,索性這里給總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue中下載不同文件五種常用的方式,需要的朋友可以參考下2023-09-09