核心元件影像元件是自我調整影像元件。
影像元件提供最適化影像選擇和回應式行為,頁面訪客可延遲載入,內容作者可輕鬆放置影像。
範本作者可以在下列位置定義影像寬度和其他設定: 設計對話方塊. 內容編輯者可以上傳或選取 設定對話方塊。
影像元件的目前版本是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
DAM中的中繼資料,或目前頁面的中繼資料(若未連結資產)。影像資產
不提供替代文字 — 此選項會針對影像純粹起裝飾作用或不向頁面傳達額外資訊的情況,將影像標籤為被熒幕閱讀器等輔助技術忽略。
&
,無論哪一個 預設集型別 「 」已選取。dc:title
dam中的中繼資料。智慧型裁切 和 影像預設集 是互斥選項。 如果作者需要使用影像預設集以及智慧型裁切轉譯,該作者必須使用 影像修飾元 以手動新增預設集。
影像元件支援AEM 樣式系統。.
使用下拉式清單,選取要套用至元件的樣式。 在「編輯」對話方塊中所做的選取與從元件工具列中選擇的效果相同。
必須在以下位置為此元件設定樣式: 設計對話方塊 讓下拉式功能表可供使用。
您可以定義影像的寬度清單(以畫素為單位),元件會根據瀏覽器大小自動載入最適合的寬度。 這是 回應式功能 影像元件的。
檢視檔案 最適化影像Servlet 提供透過仔細定義寬度來最佳化轉譯選擇的秘訣。
影像元件支援AEM 樣式系統.
影像元件支援 Adobe使用者端資料層。