Image | Bricks Dag, Inc. Help Center

Image 圖像元件介紹

圖像元件用於承載圖像，提供使用者豐富版面編排的內容呈現

＊目前尚未支援動態的PNG格式，要實現動態圖檔請使用 Lottie 元件

圖像元件在畫布上的各種呈現樣貌

Frame 區塊

Frame 基本屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Frame 區塊解說

Properties 區塊

圖像元件的 Properties 基本屬性繼承方塊元件，詳細可參考方塊元件 Properties 區塊解說。

其他屬性解說如下：

Property Name 屬性名稱	Property Type 屬性形態	Description 說明
Resize Mode	One Of 清單	The resize methods that will be applied when the image's dimensions differ from the image brick's (the container's) dimensions. contain cover stretch repeat center 設定圖片在圖像元件中的呈現模式，一共有以下幾種模式可選擇 `contain`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸。圖片完全被包裹在圖像元件中，圖像元件中可能留有空白 `cover`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸。圖片完全覆蓋甚至超出圖像元件，圖像元件中不留任何空白。 `stretch`: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿圖像元件。 `repeat`: 重複平鋪圖片直到填滿圖像元件。圖片會維持原始尺寸。 `center`: 居中不拉伸。在圖片尺寸大於圖像元件情況下效果等同於 contain。
Path	String (File/ URL) 字串 (檔案路徑/ 網址)	The file path of the image (URL or image files from Media Box). 設定圖片的連結路徑，可選擇使用 Media Box 中上傳的圖檔。
MD5	String 字串 (128位元的散列值)	The checksum of the file. 自動生成的雜湊值，用於確保檔案在傳輸中的一致性及正確性。
Tint Color	String 字串	To change the color of all non-transparent pixels of the image to the tint color. 設定圖像中所有非透明的像素指定一個顏色覆蓋，使其原像素色彩變成指定顏色。
Fade Duration	ms 毫秒	The fade-in duration of the image. 設定圖像元件淡入的動畫持續時間。
Avatar	Boolean 布林值 Yes / No	To set the image as avatar (profile picture) mode. It rounds the corners of the image. 設定圖像為頭像模式，四個邊角會自動導角成圓弧性。
Width	Number 數值	The width of the avatar. Setting this value to be equal to the image's height will make the image avatar circular. 設定 Avatar 的圖像元件寬度，將寬度設定為和高度一致時會使 Avatar 頭像呈現圓形。

Properties - Border

基本邊框屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Border 區塊解說

Animations

基本動畫事件屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Animation 區塊解說。

其他動畫事件屬性解說如下：

On Load

Animation that will be triggered when the image is loaded.

當 Image 圖像元件讀取完成觸發的動畫事件。

Events

基本事件屬性和 Rect 方塊元件相同，詳細可參考方塊元件 Event 區塊解說。

其他事件屬性解說如下：

On Load

Event that will be triggered when the image is loaded.

當 Image 圖像元件讀取完成觸發的事件。

NEXT - Video 影片元件