Image 圖片

帶載入狀態、失敗處理與預覽的圖片容器。使用 Element Plus 的 el-image,一般內容圖優先用它而不是裸 <img>。

設計準則

• fit 必設:縮圖、卡片圖用 cover(填滿裁切);需要看到完整圖用 contain
• 失敗狀態必設(error slot):灰底 + 圖標 + 「載入失敗」,不能出現破圖
• 列表縮圖開 lazy 懶載入
• 點圖看大圖用 preview-src-list,不要自己做燈箱

fit 填充方式

loading

載入失敗

loading

大圖預覽

loading

懶載入(lazy)

列表縮圖加 lazy,捲進可視範圍才載入;搭配固定尺寸容器避免載入時版面跳動:

loading

自訂工具欄

toolbar slot 自訂預覽器底部工具列。示範與官方一致的完整組合 (上一張/下一張/跳到最後/縮放/旋轉/還原/下載);實際使用時只留該場景需要的操作:

loading

自訂進度條

多張預覽時用 show-progress 顯示位置;progress slot 可自訂文案:

loading

Do / Don't

✅ Do	❌ Don't
縮圖 cover、看全圖 contain	不設 fit 讓圖變形
error slot 給失敗樣式	破圖直接露出來
preview-src-list 看大圖	自刻燈箱

給工程師

完整 API 見 Element Plus Image 文件。 本站規範優先於 EP 文件中的視覺建議。