vue中img或元素背景圖片無法顯示或路徑錯誤的解決
更新時(shí)間：2022年08月25日 10:13:01 作者：東之健大壞蛋
這篇文章主要介紹了vue中img或元素背景圖片無法顯示或路徑錯誤的解決方案，具有很好的參考價(jià)值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
img或元素背景圖片無法顯示或路徑錯誤
1.在給vue中img元素動態(tài)綁定圖片路徑時(shí)會顯示不出來圖片：
<span>普通:</span><img src="./video.png" alt="" srcset=""> <span>動態(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)的路徑引用錯誤問題
在本地寫好的頁面，測試展示效果都是正常的，經(jīng)過 打包后，背景圖片不展示，經(jīng)過排查后，發(fā)現(xiàn)是引用路徑有問題。
<div :style="logo"></div>
data(){
?? ?return{
?? ??? ?logo: {
? ? ? ? ?? ?backgroundImage: "url(" + require("../../../images/logo.png") + ")", // 背景圖片
? ? ? ? ?? ?backgroundRepeat: "no-repeat",?
? ? ? ? ?? ?backgroundSize: "50% 100%",
? ? ? ? ?? ?backgroundPosition: "center",
? ? ? },
?? ?}
}修改后，在經(jīng)過打包部署，背景圖片就可以正常顯示了。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)下載zip壓縮包方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue如何使用rules對表單字段進(jìn)行校驗(yàn)
這篇文章主要介紹了詳解vue如何使用rules對表單字段進(jìn)行校驗(yàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue的雙向數(shù)據(jù)綁定實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
本文主要介紹了Vue?中v-model的完整用法及原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue通過ollama接口調(diào)用開源模型實(shí)現(xiàn)人機(jī)對話功能
文章介紹了如何在本地安裝ollama并配置開源大模型,以及如何通過JavaScript和Vue.js實(shí)現(xiàn)人機(jī)對話功能,感興趣的朋友一起看看吧2024-11-11
解決element-ui el-input賦值后不能編輯的問題
這篇文章主要介紹了解決element-ui el-input賦值后不能編輯的問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
vue.js實(shí)現(xiàn)會動的簡歷(包含底部導(dǎo)航功能，編輯功能)
這篇文章主要介紹了vue.js實(shí)現(xiàn)一個(gè)會動的簡歷(包含底部導(dǎo)航功能，編輯功能),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12
vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法
這篇文章主要介紹了vue3中使用router路由實(shí)現(xiàn)跳轉(zhuǎn)傳參的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue-cli配置flexible過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07