网站建设案例实录,网站首页布局设计教程,最常用的专业网页设计工具,有网站模板如何预览#xff03;vue.js项目中#xff0c;出现css调用background背景图无效#xff1f;如何解决#xff1f; 或者调用img标签#xff0c;也无效果#xff1f; 直接上代码#xff0c;自行对比查找一下#xff1a; 效果图预览 1. 正确的代码#xff0c;示例如下vue.js项目中出现css调用background背景图无效如何解决 或者调用img标签也无效果 直接上代码自行对比查找一下 效果图预览 1. 正确的代码示例如下 templatediv classdemo!-- 成功引入的三种方法 --!-- 图1 --div classimg1/div!-- 图2 --div classimg2 :style{backgroundImage: url( bg2 ) }/div!-- 图3 --img src~/assets/img/pageBg.png width100/div
/templatescript
import Bg2 from /assets/img/pageBg.pngexport default {name: App,data () {return {bg2: Bg2,或者:bg2: require(/assets/img/pageBg.png)}}
}
/scriptstyle.demo{width: 100px;margin: 50px auto;}.img1{width: 100px;height: 100px;background: url(~/assets/img/pageBg.png) center center no-repeat;background-size: 100px auto;}.img2{width: 100px;height: 100px;background-position: center center;background-repeat: no-repeat;background-size: 100px auto;}
/style上述代码中出现了诸如~/ 和 / 如果删除后测试效果也正常你也可以都去掉不影响。 2. 错误的代码截图对比如下 报错结果截图如下 修改为正确代码方法类比如下 div :style{backgroundImage: url(https://cn.vuejs.org/images/logo.png), width: 400px, height: 400px}foo/div 相比其他方法 如果你用了vue-cli脚手架在build/utils.js中找到ExtractTextPlugin位置在对象中加入这句publicPath: ../../就行了(本人未测试)。 以上就是关于“vue.js 引用背景图 background 无效的3种解决办法”的简单介绍。
