核心元件影像元件是自適應影像元件。
「影像元件」提供適用性影像選取及對頁面訪客具有延遲載入的回應式行為,以及為內容作者提供簡易的影像放置。
範本作者可在 設計對話. 內容編輯器可以上傳或選取 配置對話框。
目前的影像元件版本為v3,此版本於2022年2月2.18.0版核心元件時推出,本檔案將加以說明。
下表詳細說明所有支援的元件版本、與元件版本相容的AEM版本,以及舊版檔案的連結。
元件版本 | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v3 | - | 相容 | 相容 |
v2 | 相容 | 相容 | 相容 |
v1 | 相容 | 相容 | 相容 |
如需核心元件版本和版本的詳細資訊,請參閱本檔案 核心元件版本.
影像元件隨附立即可用的強大回應式功能。 在頁面範本層級, 設計對話 可用來定義影像資產的預設寬度。 影像元件會根據瀏覽器視窗的大小自動載入顯示的正確寬度。 視窗調整大小時,影像元件會動態載入正確的影像大小。 元件開發人員無需擔心定義自訂媒體查詢,因為影像元件已最佳化以載入您的內容。
此外,影像元件支援延遲載入,將實際影像資產的載入延遲到在瀏覽器中顯示為止,以提高頁面的回應速度。
依預設,影像元件由最適化影像Servlet提供技術支援。 請查看該文檔 適用性影像Servlet 以取得運作方式的詳細資訊。
影像元件(截至 版本2.13.0)支援 Dynamic Media 資產。 啟用後, 這些功能可讓您透過簡單的拖放功能,或透過「資產」瀏覽器,新增Dynamic Media影像資產,如同其他影像一樣。 此外,還支援影像修飾元、影像預設集和智慧型裁切。
以核心元件建置的網頁體驗,可提供豐富、Sensei支援、強大、高效能、跨平台的Dynamic Media影像功能。
影像元件支援可縮放向量圖形(SVG)。
基於安全考量,影像編輯器絕不會直接呼叫原始SVG。 它被調用 <img src=“path-to-component”>
. 這會防止瀏覽器執行任何內嵌在SVG檔案中的指令碼。
若要體驗影像元件,並查看其設定選項、HTML和JSON輸出的範例,請造訪 元件庫.
影像元件的最新技術檔案 可在GitHub上找到.
有關開發核心元件的詳細資訊,請參閱 核心元件開發人員檔案.
影像元件支援 schema.org microdata.
影像元件提供設定對話方塊,定義影像本身及其說明和基本屬性。
從頁面繼承精選影像 — 此選項使用 連結頁面的精選影像 或目前頁面的精選影像(若未連結)。
協助工具的替代文字 — 此欄位可讓您為視覺障礙使用者定義影像說明。
dc:description
中繼資料(若未連結任何資產)。影像資產
不提供替代文本 — 如果影像純粹是裝飾性的,或未傳達其他資訊至頁面,此選項會標籤要由輔助技術(例如螢幕閱讀器)忽略的影像。
&
,無論 預設類型 中所有規則的URL。dc:title
DAM中的中繼資料。智慧型裁切 和 影像預設集 是互斥的選項。 如果作者需要使用影像預設集和智慧型裁切轉譯,則作者必須使用 影像修飾元 來手動添加預設集。
影像元件支援AEM 樣式系統。.
使用下拉式清單選取您要套用至元件的樣式。 在編輯對話框中所做的選擇與從元件工具欄中選擇的選項具有相同的效果。
必須針對此元件在 設計對話 讓下拉式功能表可供使用。
您可以定義影像的寬度清單(以像素為單位),元件會根據瀏覽器大小自動載入最適當的寬度。 這是 回應式功能 的下限。
請參閱檔案 適用性影像Servlet 請參閱謹慎定義寬度以最佳化轉譯選取的秘訣。
影像元件支援AEM 樣式系統.
影像元件支援 Adobe用戶端資料層。