圖像 Image | Bricks Dag, Inc. Help Center

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

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

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

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

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

其他屬性解說如下：

屬性名稱	屬性形態	說明
Resize Mode	清單	設定圖片在圖像元件中的呈現模式，一共有以下幾種模式可選擇 `contain`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小於等於容器視圖的尺寸。圖片完全被包裹在圖像元件中，圖像元件中可能留有空白 `cover`: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大於等於容器視圖的尺寸。圖片完全覆蓋甚至超出圖像元件，圖像元件中不留任何空白。 `stretch`: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿圖像元件。 `repeat`: 重複平鋪圖片直到填滿圖像元件。圖片會維持原始尺寸。 `center`: 居中不拉伸。在圖片尺寸大於圖像元件情況下效果等同於 contain。
Path	字串 (檔案路徑/ 網址)	設定圖片的連結路徑，可選擇使用 Media Box 中上傳的圖檔。
MD5	字串 (128位元的散列值)	自動生成的雜湊值，用於確保檔案在傳輸中的一致性及正確性。
Tint Color	字串	設定圖像中所有非透明的像素指定一個顏色覆蓋，使其原像素色彩變成指定顏色。
Fade Duration	毫秒	設定圖像元件淡入的動畫持續時間。
Avatar	布林值 Yes / No	設定圖像為頭像模式，四個邊角會自動導角成圓弧性。
Width	數值	設定 Avatar 的圖像元件寬度，將寬度設定為和高度一致時會使 Avatar 頭像呈現圓形。

Properties - Border

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

Animations

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

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

On Load

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

Events

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

其他事件屬性解說如下：

On Load

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

若需要任何幫助，歡迎點擊右下角的對話圖示詢問，我們會盡快回覆您的問題