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