vue中img或元素背景图片无法显示或路径错误的解决
更新时间：2022年08月25日 10:13:01 作者：东之健大坏蛋
这篇文章主要介绍了vue中img或元素背景图片无法显示或路径错误的解决方案，具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
img或元素背景图片无法显示或路径错误
1.在给vue中img元素动态绑定图片路径时会显示不出来图片：
<span>普通:</span><img src="./video.png" alt="" srcset=""> <span>动态绑定:</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>
背景图片打包后出现的路径引用错误问题
在本地写好的页面，测试展示效果都是正常的，经过 打包后，背景图片不展示，经过排查后，发现是引用路径有问题。
<div :style="logo"></div>
data(){
return{
logo: {
backgroundImage: "url(" + require("../../../images/logo.png") + ")", // 背景图片
backgroundRepeat: "no-repeat",
backgroundSize: "50% 100%",
backgroundPosition: "center",
},
}
}修改后，在经过打包部署，背景图片就可以正常显示了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目实现下载zip压缩包方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了详解vue如何使用rules对表单字段进行校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Vue的双向数据绑定实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
本文主要介绍了Vue 中v-model的完整用法及原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
文章介绍了如何在本地安装ollama并配置开源大模型,以及如何通过JavaScript和Vue.js实现人机对话功能,感兴趣的朋友一起看看吧2024-11-11
解决element-ui el-input赋值后不能编辑的问题
这篇文章主要介绍了解决element-ui el-input赋值后不能编辑的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了vue.js实现一个会动的简历(包含底部导航功能，编辑功能),本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
这篇文章主要介绍了解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-12-12
这篇文章主要介绍了vue3中使用router路由实现跳转传参的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了vue-cli配置flexible过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
最新评论