美文网首页
vue 动态绑定背景图片

vue 动态绑定背景图片

作者: 顺其自然AAAAA | 来源:发表于2020-05-17 11:17 被阅读0次

    分为两种,第一种是动态绑定后台传来的图片,第二种是我们自己文件夹的图片
    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;

    相关文章

      网友评论

          本文标题:vue 动态绑定背景图片

          本文链接:https://www.haomeiwen.com/subject/mtyjohtx.html