影像元件 image-component
核心元件影像元件是最適化影像元件。
用途 usage
影像元件提供最適化影像選擇和回應式行為，讓頁面訪客可延遲載入，且內容作者可輕鬆放置影像。
內容作者可以使用編輯對話框來編輯影像資產，例如套用裁切或旋轉影像。
範本作者可以使用設計對話框定義影像寬度與其他設定。內容編輯者可以使用設定對話框上傳或選取資產。
版本和相容性 version-and-compatibility
影像元件的目前版本為 v3，此版本於 2022 年 2 月隨著核心元件 2.18.0 版發行導入，詳情請參閱本文件。
下表詳細說明該元件的所有支援版本、與元件版本相容的 AEM 版本，以及舊版文件的連結。
如需核心元件版本和發行版本的進一步詳細資訊，請參閱核心元件版本文件。
回應式功能 responsive-features
「影像元件」提供可立即可用的強大回應式功能。在頁面範本層級，設計對話框可用於定義影像資產的預設寬度。「影像元件」會自動載入正確的寬度，以根據瀏覽器視窗的大小來顯示。視窗調整大小時，「影像元件」會即時動態載入正確的影像大小。元件開發人員無需擔心自訂媒體查詢的定義方式，因為「影像元件」已針對內容載入進行最佳化。
此外，「影像元件」支援延遲載入，將實際影像資產的載入延遲到顯示在瀏覽器中為止，藉此提高頁面的回應能力。
與 v2 的差異 v2-differences
與影像元件版本 2 不同，版本 3 使用瀏覽器原生回應。這表示它會為瀏覽器提供一組不同寬度影像的來源，而瀏覽器會挑選最佳來源。
大多數情況下，瀏覽器偏好在本機縮小較大的寬度以符合較小的檢視區，而非從伺服器擷取較小的寬度影像。這是預期會出現的情況，以及為什麼不應該將影像元件用於藝術方向 (不同的檢視區會有不同的影像/裁切)。
如需詳細資訊，請參閱影像元件的技術文件。
Dynamic Media 支援 dynamic-media
影像元件 (截至 2.13.0 版) 支援 Dynamic Media 資產。啟用後，這些功能可讓您使用簡單的拖放功能，或透過資產瀏覽器，像處理任何其他影像一樣新增「Dynamic Media」影像資產。此外，同樣支援影像修飾元、影像預設集和智慧裁切。
使用「核心元件」建立的網頁體驗可包含豐富、Sensei 支援、穩定、高效能、跨平台的「Dynamic Media 影像」功能。
遠端資產支援 remote-assets
影像元件 (截至 2.23.2 版) 支援遠端資產。設定後，您就可以從影像元件的遠端服務選取資產。
SVG 支援 svg-support
「影像元件」支援可縮放向量圖形 (SVG)。
- 支援從 DAM 拖放 SVG 資產以及上傳已從本機檔案系統上傳的 SVG 檔案。
- 原始 SVG 檔案會串流處理 (略過轉換)。
- 對於 SVG 影像，「智慧型影像」和「智慧型大小」會設定為影像模型中的空白陣列。
安全性 security
基於安全考量，「影像編輯器」絕對不會直接呼叫原始 SVG。而是透過 <img src="path-to-component"> 呼叫。這可防止瀏覽器執行內嵌於 SVG 檔案中的任何指令碼。
範例元件輸出 sample-component-output
若要體驗「影像元件」，並檢視其設定選項及 HTML 和 JSON 輸出的範例，請造訪「元件庫」。
技術詳細資訊 technical-details
在 GitHub 上可找到有關影像元件的最新技術文件。
如需開發「核心元件」的進一步詳細資訊，請參閱核心元件開發人員文件。
「影像元件」支援 schema.org 結構化資料。
編輯對話框 edit-dialog
編輯對話框可讓內容作者裁切和縮放影像。
根據您是否啟用 Dynamic Media 或已啟用遠端資產支援 ，可用於編輯影像的選項會有所不同。
標準資產編輯 standard-assets
如果您正在編輯標準 AEM 資產，可以按一下影像元件內容選單中的 編輯 圖示。
-
開始裁切
選取此選項會開啟預先定義裁切比例的下拉式清單。
- 選擇選項 移除裁切 以顯示原始資產。
選取裁切選項後，請使用藍色控點來調整影像上的裁切大小。
-
向右旋轉
使用此選項可將影像向右 (順時針) 旋轉 90°。
-
重設縮放
如果影像已經縮放，請使用此選項來重設縮放等級。
-
開啟縮放滑桿
使用此選項可顯示控制影像縮放等級的滑桿。
就地編輯器也可用於修改影像。由於空間限制，僅基本選項內嵌。如需完整的編輯選項，請使用全螢幕模式。
Dynamic Media 資產編輯 dynamic-media-assets
如果您已啟用 Dynamic Media 功能，則必須在資產主控台中執行影像本身的編輯。
設定對話框 configure-dialog
「影像元件」提供設定對話框，其中定義該影像本身、其說明和基本屬性。
資產索引標籤 asset-tab
-
從頁面繼承精選影像 - 此選項使用連結頁面的精選影像，若未連結至該影像，則會使用目前頁面的精選影像。
-
影像資產 - 若已選取 從頁面繼承精選影像，則會自動填入。取消選取可透過設定以下選項來手動定義影像。
-
協助工具替代文字 - 此欄位可讓您為視障使用者定義影像的說明。
- 從頁面繼承替代文字 - 此選項會使用 DAM 中
dc:description後設資料所連結資產值的替代說明，若未連結任何資產，則會使用目前頁面的替代說明。
- 從頁面繼承替代文字 - 此選項會使用 DAM 中
-
不提供替代文字 - 標記該影像被螢幕助讀程式等輔助技術忽略，適用於影像僅用於裝飾或不向頁面傳達額外資訊的情況。
後設資料索引標籤 metadata-tab
-
預設集類型 - 定義可用影像預設集的類型，可以是 影像預設集 或 智慧裁切，而且僅在 Dynamic Media 功能啟用時可用。
- 影像預設集 - 當選取 影像預設集 的 預設集類型 時，影像預設集 下拉式清單可供使用，並允許從可用的「Dynamic Media」預設集中選取。這只有在為選取的資產定義了預設集時才能使用。
- 智型裁切 - 當選取 智型裁切 的 預設集類型 時，轉譯 下拉式清單可供使用，並允許從所選資產的可用轉譯中選取。這只有在為選取的資產定義了轉譯時才能使用。
- 影像修飾元 - 此處定義其他「Dynamic Media」影像命令，並以
&分隔，無論選取哪個 預設集類型 均適用。
-
註解 - 影像的其他相關資訊，預設會顯示於影像下方。
- 從 DAM 取得註解 - 勾選後，影像的註解文字會以 DAM 中
dc:title後設資料的值填入。 - 以快顯視窗顯示註解 - 勾選後，註解不會顯示在影像下方，但如在某些瀏覽器中將游標停留在影像上，註解會以快顯視窗顯示。
- 從 DAM 取得註解 - 勾選後，影像的註解文字會以 DAM 中
-
連結 - 將影像連結至其他資源。
- 使用選取對話框可連結至其他 AEM 資源。
- 如果未連結至 AEM 資源，請輸入絕對 URL。非絕對 URL 將解釋為相對於 AEM。
- 在新索引標籤中開啟連結 - 此選項會在新的瀏覽器視窗中開啟連結。
-
ID - 此選項可讓您控制 HTML 和資料層中元件的唯一識別碼。
- 如果留空，則會自動產生唯一識別碼，您可以透過檢查得出的頁面找到該 ID。
- 若已指定 ID，則作者應確保其為唯一識別碼。
- 變更該 ID 會對 CSS、JS 和「資料層」追蹤造成影響。
樣式索引標籤 styles-tab-edit
影像元件支援 AEM 樣式系統。
使用下拉式清單，選取想要套用至元件的樣式。在編輯對話框中所做的選取，與從元件工具列中選擇具有相同效果。
元件樣式必須在設計對話框中設定，才能使用該下拉式選單。
設計對話框 design-dialog
主要索引標籤 main-tab
-
啟用 DM 功能 - 勾選後，即可使用 Dynamic Media 功能。
- 只有在環境中啟用「Dynamic Media」時，才會顯示此選項。
-
啟用網頁最佳化影像 - 勾選後，網頁最佳化影像傳遞服務會以 WebP 格式傳送影像，平均將影像大小減少 25%。
- 此選項僅在 AEMaaCS 中可用。
- 取消勾選或無法使用網頁最佳化的影像傳遞服務時，會使用最適化影像 Servlet。
-
停用延遲載入 - 勾選後，元件會預先載入所有影像，而不會延遲載入。
-
影像為裝飾性 - 定義將影像元件新增至頁面時，是否自動啟用裝飾性影像選項。
-
從 DAM 取得替代文字 - 定義在將影像元件新增至頁面時，是否自動啟用從 DAM 擷取替代文字的選項。
-
從 DAM 取得註解 - 定義在將影像元件新增至頁面時，是否自動啟用從 DAM 擷取註解的選項。
-
以快顯視窗顯示註解 - 定義將影像元件新增至頁面時，是否自動啟用以快顯視窗顯示影像註解的選項。
-
調整寬度 - 此值用於調整作為 DAM 資產的基本影像的寬度。
- 影像的外觀比例會保留。
- 如果該值大於影像的實際寬度，則該值無效。
- 此值對 SVG 影像沒有影響。
您可以定義影像的寬度 (以像素為單位) 清單，元件會根據瀏覽器大小自動載入最適當的寬度。這是「影像元件」回應式功能的重要部分。
-
寬度 - 定義影像的寬度 (以像素為單位) 清單，元件會根據瀏覽器大小自動載入最適當的寬度。
-
點選或按一下 新增 按鈕以新增其他大小。
- 使用抓取控點，以重新排列大小順序。
- 使用 刪除 圖示來移除寬度。
-
根據預設，影像載入會延遲到影像可見為止。
- 選取選項 停用延遲載入，以便在頁面載入時載入影像。
-
-
JPEG 品質 - 轉換後 (例如縮放或裁切) 的 JPEG 影像品質係數 (以 0 到 100 的百分比表示)。
樣式索引標籤 styles-tab
影像元件支援 AEM 樣式系統。
Adobe Client Data Layer data-layer
「影像元件」支援 Adobe Client Data Layer。