elementui el-image image图片

最新推荐文章于 2025-06-19 14:19:40 发布

iCrazyTimor

最新推荐文章于 2025-06-19 14:19:40 发布

阅读量2.1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/iCrazyTimor/article/details/103458757

vue 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Element UI中图片组件的使用方法，包括如何通过fit属性调整图片适应容器，自定义占位和错误内容，开启懒加载及预览大图功能。适用于前端开发者快速掌握图片组件的高级用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 开启预览大图的功能。