圖片組件

1 組件簡介

圖片組件是用來對圖片進行展示的組件。用戶可以通過儀表盤的圖片組件來展示圖片、用於提升儀表盤整體的美觀度，或展示個性訊息。例如在儀表盤插入企業logo圖片。

2 使用場景

當在儀表盤中需要進行圖片展示時可以使用圖片組件。例如，在儀表板中需要引入公司圖片 logo 等場景

3 設定圖片組件

3.1 建立入口

1646477437016-84e580d0-82d5-4180-b958-f05c2f9206b1.png

3.2 新增圖片 新增圖片有兩種方式，一種是拖拽圖片到組件內容區域，另一種通過點擊上傳

1646477639521-675d1202-f5f6-4344-bfb8-2f67ccd8234c.png

1646478803762-cff8e076-7355-4566-b4ec-8c008af006ac.png

3.3 設定展示模式 1646478841042-6b40665f-fd70-46e3-9fb4-63b8145ebe25.png

圖片組件支持3種展示模式對圖片進行展示：原圖居中、原圖填寫、拉伸填寫
3種展示模式的區別如下：
**原圖居中：**保持原圖長寬比不變，留白居中展示在組件中間
**原圖填寫：**保持原圖長寬比不變，剪裁後填寫組件進行填寫展示
**拉伸填寫：**原圖的長寬比發生改變，按組件長寬比拉伸填寫展示
3種展示模式的效果如下：

1646478996188-9fd6dd37-0d82-412f-844d-2f442fd9f47e.png

更新: 2024-05-07 18:31:23
原文: https://www.yuque.com/skwme4/hyk0u0/xmb6ishwgvvzg38g