vue 动态绑定背景图片

分为两种,第一种是动态绑定后台传来的图片,第二种是我们自己文件夹的图片
1.绑定后台传来的图片

<div class="img" :style="{backgroundImage: 'url(' + srcImgUrl + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">

2.文件夹的图片(注意,这种方式一定要用require的方式)

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

3.也可以在data中存储先,在引用

<div :style="{backgroundImage: 'url(' + src + ')', backgroundSize:'contain'}">
   data(){
            return{
              // 这种方式也要使用require
                src: require('../../assets/images/other/002.jog')
            }
        }

4属性:
4.1
background-repeat 属性:背景图像- 设置定位与不平铺
background-repeat:no-repeat;
4.2
background-position:设置背景图像的起始位置。
4.3
background-origin:background-Origin属性指定background-position属性应该是相对位置。
4.4
background-size:background-size属性指定背景图片大小
语法:background-size: length|percentage|cover|contain;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。