vue 通过background-image引入图片失效问题

一、以下情况webpack根本找不到图片资源

<div class="test" style="background-image: url(test.jpg);"></div> <style lang="scss"> .test { width:100px; height:100px; background-image:url("../../assects/img/test.png") } </style>

行内样式，和 class都找不到，解决方式如下

 

二、解决方式

在script标签里面

data () { return { img: require('你的图片路径') } }

在template里面，这里的 ${img} 是ES6模板字符串语法

<div :style="{backgroundImage:`url(${img})`}"> </div>

 三、 如果想了解，动态加载，background-image , 请点击下面博文链接https://www.cnblogs.com/tengyuxin/p/11193890.html

转载于:https://www.cnblogs.com/tengyuxin/p/11192800.html