图片Image
该组件基于 Element Plus 的 el-image 封装，支持阿里云 OSS 图片处理参数（如缩略图、水印、低质量加载等），并实现渐进式加载与预览功能，适用于复杂图片展示场景。
基础属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
width | string | -- | 图片宽度（支持 CSS 单位，如 100px、50%） |
height | string | -- | 图片高度（支持 CSS 单位） |
fit | string | -- | 图片填充类型（可选：fill / contain / cover / scale-down / none） |
lazy | boolean | -- | 是否使用懒加载 |
cloudType | string | aliyun | 图床类型（当前仅支持“阿里云”） |
defaultArgs | string | x-oss-process=style/lowQuality | 默认加载参数（仅当图床类型为阿里云时显示） |
progressive | boolean | -- | 是否渐进式加载（仅当图床类型为阿里云时显示） |
thumbnailArgs | string | x-oss-process=style/thumbnail | 缩略图加载参数（仅当启用渐进式加载且图床为阿里云时显示） |
preview | boolean | true | 是否开启预览 |
previewArgs | string | x-oss-process=style/watermark | 预览图加载参数（仅当开启预览且图床为阿里云时显示） |
高级属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
src | string | https://picsum.photos/200/300 | 图片地址（可绑定） |
alt | string | -- | 图片描述（可绑定） |
previewSrcList | string[] | -- | 图片预览列表（可绑定；仅当开启预览时显示） |
initialIndex | number | -- | 初始预览图像索引（可绑定；仅当开启预览时显示，最小值为 0） |
阿里云配置
缩略图样式：x-oss-process=style/thumbnail 配置
html
image/resize,p_10/quality,q_10/watermark,text_QGxvd2NvZGU,color_ffffff,size_12,g_se,t_30,x_10,y_10低质量图样式：x-oss-process=style/lowQuality 配置
html
image/quality,q_30/watermark,text_QGxvd2NvZGU,color_ffffff,size_12,g_se,t_30,x_10,y_10水印图样式：x-oss-process=style/watermark 配置
html
image/auto-orient,1/watermark,text_QGxvd2NvZGU,color_ffffff,size_12,g_se,t_30,x_10,y_10💡 全部样式带有 @lowcode 水印，可按需修改
注意事项
- 图片处理支持：当
cloudType为aliyun时，组件会自动在图片 URL 后拼接defaultArgs、thumbnailArgs或previewArgs参数，实现低质量占位、缩略图渐进加载及带水印预览；需在阿里云 OSS 配置相应的图片处理样式； - 渐进式加载逻辑：若启用
progressive，组件先加载带thumbnailArgs的模糊缩略图，再后台加载完整图（带defaultArgs），加载完成后淡入清晰图； - 预览图处理：开启
preview时，previewSrcList中的每张图都会附加previewArgs参数；若未提供列表但有src，则自动将处理后的src加入预览； - 尺寸单位：
width和height支持任意 CSS 长度单位（如px、%、rem），由平台CssSymbols控制输入格式； - 默认图兜底：所有图片请求（主图、缩略图、预览图）均会附加
defaultArgs作为基础处理参数，确保兼容 OSS 样式策略。