用途:el-image 是 Element Plus 的图片组件,在原生 img 之上扩展了懒加载、占位内容、加载失败处理与图片预览功能。当需要在 Vue 页面中展示图片、处理加载状态或错误回退、或构建图片预览画廊时使用。
主要能力:支持 fit 控制图片填充方式(fill、contain、cover、none、scale-down);通过 lazy 开启懒加载,可用 scroll-container 指定滚动容器;提供 placeholder 与 error 两个插槽自定义加载中与加载失败内容;通过 preview-src-list 配置预览图列表,配合 initial-index 设置初始索引,并支持缩放(zoom-rate、min-scale、max-scale)、无限预览(infinite)、显示进度(show-progress)、ESC 关闭(close-on-press-escape)、点击遮罩关闭(hide-on-click-modal)及 preview-teleported 传送预览层。事件包括 load、error、switch、close、show;暴露 showPreview 方法可手动打开预览。
使用方式:基础用法为 <el-image style="width: 100px; height: 100px" :src="url" fit="cover" />。占位与错误回退通过具名插槽 #placeholder、#error 实现。懒加载加 lazy 属性。预览传入 :preview-src-list="srcList" 与 :initial-index="0"。
适用场景:列表或长页面中位于首屏之外的图片、需要加载占位与失败兜底的图片展示、多图预览画廊。
限制:资料未提供安装方式、版本要求、浏览器兼容性、性能数据及收费信息,暂未提供。