vue行内样式里面写背景图片不显示

最新推荐文章于 2023-12-28 11:41:33 发布

cathy18c

最新推荐文章于 2023-12-28 11:41:33 发布

阅读量5.8k

点赞数 6

分类专栏： VUE框架

本文链接：https://blog.csdn.net/cathy18c/article/details/103210767

版权

VUE框架专栏收录该内容

32 篇文章 2 订阅

订阅专栏

vue中图片放在assets里面，比如某张图片做div背景图

<div style="width:200px;height:100px;background:url(../../assets/cardbg.png)">

这么写图片不显示出来，以为是图片路径的问题，但是放在img标签里面又是正常的

<img src="../../assets/cardbg.png"/>

这样又是正常的，可以显示

解决方法：

<div :style="`position:relative;width:300px;height:150px;margin:0 auto;background-size:100% 100%;background:url(${url}) no-repeat`"></div>

data(){
	return{
		url: require('../../assets/cardbg.png')
		}
}

或者：
<div :style="{ 'background': 'url(' + require('../../assets/cardbg.png') + ') no-repeat center center', 'background-size': '100% 100%'}">

也可以：
.listWrapper
      width 350px
      height 150px
      background url('~@/assets/cardbg.png') no-repeat center center
      background-size 100% 100%
div中直接引用这个样式