您现在的位置是:网站首页> 编程资料编程资料
vue.js引用背景图background无效的3种解决方案_vue.js_
2023-05-24
387人已围观
简介 vue.js引用背景图background无效的3种解决方案_vue.js_
#vue.js项目中,出现css调用background背景图无效?如何解决?
或者调用标签,也无效果?
直接上代码,自行对比查找一下:
效果图预览

1. 正确的代码,示例如下
上述代码中,出现了诸如:~@/和 @/,如果删除后,测试效果也正常,你也可以都去掉,不影响。
2. 错误的代码,截图对比
如下:

报错结果截图如下:

修改为正确代码方法,类比如下:
foo
具体参考官方文档:Class 与 Style 绑定
相比其他方法:
如果你用了vue-cli脚手架,在build/utils.js中找到ExtractTextPlugin位置在对象中加入这句publicPath: '../../'就行了(本人未测试)。
其他未测试到的状况,本文暂不深入发掘,如有发现另类bug,后续将会补充。
vue添加背景图没反应
table需要添加背景图,添加backgroundImage后发现不起作用,于是网上一番搜索,发现加了require后就好了
backgroundImage: ‘url(’ + require(‘图片地址’) + ‘)’,原来vue中的js引入图片,必须require进来。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- Vue keepAlive实现不同的路由共用一个组件component的缓存问题(推荐)_vue.js_
- JS实现弹幕小案例_javascript技巧_
- vue.js动态修改background-image问题_vue.js_
- vue项目中页面底部出现白边及空白区域错误的问题_vue.js_
- Vue Router解决多路由复用同一组件页面不刷新问题(场景分析)_vue.js_
- JS实现用户管理系统_javascript技巧_
- JS实现微博发布功能_javascript技巧_
- Vue使用provide各种传值后inject获取undefined的问题及解决_vue.js_
- axios 拦截器管理类链式调用手写实现及原理剖析_JavaScript_
- JS利用循环解决的一些常见问题总结_javascript技巧_

