elementui el-image image图片

https://element.eleme.cn/#/zh-CN/component/image

<div class="demo-image__preview">
  <el-image
          ref="lazyImg"  //绑定ref  可以查看自带的属性 和 方法
          lazy      //是否懒加载
          class="vx-lazyLoad"     // class名称  可以编辑样式
          :src="item.picUrl" // 图片地址
          :fit="fit"    //充满盒子
          :preview-src-list="[item.picUrl]" // 图片编辑器地址 数组
        >
          <div slot="placeholder" class="image-slot">
            <i class="el-icon-loading"></i>加载中
          </div>
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
</div>
data      fit: 'contain'
1 可通过fit确定图片如何适应到容器框,同原生 object-fit。
2 可通过slot = placeholder可自定义占位内容
3 可通过slot = error可自定义加载失败内容
4 可通过lazy开启懒加载功能,当图片滚动到可视范围内才会加载。
	可通过scroll-container来设置滚动容器,
	若未定义,则为最近一个overflow值为auto或scroll的父元素。
5 可通过 previewSrcList 开启预览大图的功能。
  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值