美文网首页
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;

相关文章

  • 绑定style样式

    动态绑定背景图片

  • vue 动态绑定背景图片

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

  • vue动态绑定背景图片

  • vue 通过函数动态绑定背景图片

    1.图片是线上地址 2.图片是本地地址 本地地址要加个require 后面再跟图片地址

  • Vue双向绑定实例教程

    Vue双向绑定实例教程 双向绑定简介 我们知道Vue是一个典型的MVVM框架,Vue在动态绑定这一块提供了丰富的A...

  • vue 3.x 学习前 的查缺补漏

    > vue 2 查缺补漏 >>>> 动态 属性绑定 >>>> 循环绑定 >>>> 方法传值 传入事件对象 >>>>...

  • Vue 实例 一

    Vue实例基础一 数据的双向绑定 v-model 绑定表单的相应事件,和数据实现动态的双向绑定,需要在Vue实例中...

  • vue的this.$set的作用

    用于手动让vue实现动态绑定数据 如果我们在创建实例以后,再在实例上绑定新属性,vue是无法进行双向绑定的。比如:...

  • angularJs ng-style实际用法

    项目里,总有需要动态绑定样式的地方。angularJs和vue动态绑定样式的制定方法大同小异。 ng-class道...

  • vue数据绑定

    自动转义,VUE自带,防止注入攻击 解决方法: 动态绑定CSS

网友评论

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

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