您现在的位置是：网站首页> 编程资料编程资料
vue中img或元素背景图片无法显示或路径错误的解决_vue.js_
2023-05-24
384人已围观
简介 vue中img或元素背景图片无法显示或路径错误的解决_vue.js_
img或元素背景图片无法显示或路径错误
1.在给vue中img元素动态绑定图片路径时会显示不出来图片：
普通:动态绑定:
2.解决方案：使用require或import：
require1:require2:
import:
import img1 from './video.png' export default { data() { return { img1: img1, img2: require('./video.png') } } }
3.同理给元素绑定背景图片也是使用这种方式：
背景图片打包后出现的路径引用错误问题
在本地写好的页面，测试展示效果都是正常的，经过 打包后，背景图片不展示，经过排查后，发现是引用路径有问题。
data(){ return{ logo: { backgroundImage: "url(" + require("../../../images/logo.png") + ")", // 背景图片 backgroundRepeat: "no-repeat", backgroundSize: "50% 100%", backgroundPosition: "center", }, } }修改后，在经过打包部署，背景图片就可以正常显示了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
相关内容
- JavaScript实现表单验证案例_javascript技巧_
- 微信小程序开发WXML模板语法基础教程_javascript技巧_
- vue.js引用背景图background无效的3种解决方案_vue.js_
- Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)_vue.js_
- JS实现弹幕小案例_javascript技巧_
- vue.js动态修改background-image问题_vue.js_
- vue项目中页面底部出现白边及空白区域错误的问题_vue.js_
- Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)_vue.js_
- JS实现用户管理系统_javascript技巧_
- JS实现微博发布功能_javascript技巧_
