vue ----background-image （注意事项）

本文主要是介绍vue ----background-image （注意事项），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

vue ----background-image坑

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

这种使用webpack打包会出现图片资源文件找不到问题

解决方式如下:
1:

<div class="test" :style="{backgroundImage:'url('+require('../../assets/img/test.png')+')'}"></div>

2:

data(){
return {
test:'url('+require('../../assets/img/test.png')+')'
}
}

使用上述方式即可解决webpack打包图片资源问题

这篇关于vue ----background-image （注意事项）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---