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简易注册页面+发送验证码功能的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-11-11
这篇文章主要介绍了uni-app 的自定义组件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-10-10
这篇文章主要为大家详细介绍了使用Vue3封装一个通用echarts组件详解的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了Vue组件中的父子组件使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本文主要介绍了el-table 行合并的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了vue常用组件之confirm用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了vue 权限管理几种实现方法,权限需要前后端结合,前端尽可能的去控制,更多的需要后台判断,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
vue的开发体验还是比较愉悦的。首先文档非常友好，所以上手会比较快。其次，配合webpack和vue-loader，每个页面都是一个.vue文件，写起来很方便。所以很适合做组件化开发，这篇文章我们就来一起看看webpack+vue.js如何实现组件化。2016-10-10
Vite是一款非常轻量级的Web开发框架，它可以帮助开发者快速搭建一个开发环境。Vite搭建的开发环境可以提供更快的编译速度，更少的配置，更好的性能和更多的开发者友好性，使开发者可以更快地构建出功能强大的Web应用程序。2023-02-02
今天小编就为大家分享一篇解决在vue项目中webpack打包后字体不生效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论