影像元件 image-component

核心元件影像元件是自我調整影像元件。

使用狀況 usage

影像元件提供最適化影像選擇和回應式行為,頁面訪客可延遲載入,內容作者可輕鬆放置影像。

內容作者可以使用 編輯對話方塊 編輯影像資產,例如套用裁切或旋轉影像。

範本作者可以在下列位置定義影像寬度和其他設定: 設計對話方塊. 內容編輯者可上傳或選取 設定對話方塊。

版本和相容性 version-and-compatibility

影像元件的目前版本是v3,此版本隨2022年2月的核心元件發行版本2.18.0的發佈引入,詳情請參閱本檔案。

下表詳細說明元件的所有支援版本、與元件版本相容的AEM版本,以及舊版檔案的連結。

元件版本
AEM 6.4
AEM 6.5
AEM as a Cloud Service
v3
-
相容
相容
v2
相容
相容
相容
v1
相容
相容
相容

如需核心元件版本的詳細資訊,請參閱檔案 核心元件版本.

回應式功能 responsive-features

影像元件提供強大的回應式功能,立即可用。 在頁面範本層級, 設計對話方塊 可用來定義影像資產的預設寬度。 影像元件會自動載入正確的寬度,以根據瀏覽器視窗的大小來顯示。 視窗調整大小時,影像元件會即時動態載入正確的影像大小。 元件開發人員無需擔心自訂媒體查詢的定義方式,因為影像元件已最佳化以載入您的內容。

此外,影像元件支援延遲載入,將實際影像資產的載入延遲到顯示在瀏覽器中為止,藉此提高頁面的回應能力。

TIP
依預設,影像元件由最適化影像Servlet提供技術支援。 另請參閱 自我調整影像Servlet 以取得運作方式的詳細資訊。

Dynamic Media支援 dynamic-media

影像元件(截至 版本2.13.0)支援 Dynamic Media 資產。 啟用時, 這些功能可讓您透過簡單的拖放功能,或透過資產瀏覽器,像新增任何其他影像一樣新增Dynamic Media影像資產。 此外,也支援影像修飾元、影像預設集和智慧型裁切。

使用核心元件建立的網頁體驗可包含豐富、Sensei支援、穩定、高效能、跨平台的Dynamic Media影像功能。

新一代Dynamic Media支援 next-gen-dm

影像元件(截至 版本2.23.2)支援新一代Dynamic Media遠端資產。

設定後, 您可以從遠端新一代Dynamic Media服務為您的影像元件選取資產。

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 已啟用或 新一代Dynamic Media 功能已啟用,可用於編輯影像的選項會有所不同。

標準資產編輯 standard-assets

如果您正在編輯標準AEM資產,可以按一下 編輯 圖示加以調整。

影像元件的編輯對話方塊

  • 開始裁切

    開始裁切圖示

    選取此選項會開啟預先定義裁切比例的下拉式清單。

    • 選擇選項 移除裁切 以顯示原始資產。

    選取裁切選項後,請使用藍色控點來調整影像上的裁切大小。

    裁切選項

  • 向右旋轉

    向右旋轉圖示

    使用此選項可將影像向右(順時針)旋轉90°。

  • 重設縮放

    重設縮放圖示

    如果影像已經縮放,請使用此選項來重設縮放等級。

  • 開啟縮放滑桿

    開啟縮放滑桿圖示

    使用此選項可顯示控制影像縮放等級的滑桿。

    縮放顯示滑桿控制項

就地編輯器也可用於修改影像。 由於空間限制,僅基本選項內嵌。 如需完整的編輯選項,請使用全熒幕模式。

影像就地編輯選項

NOTE
GIF影像不支援影像編輯操作。 在編輯模式下對GIF所做的任何此類變更都不會持續存在。

Dynamic Media資產編輯 dynamic-media-assets

如果您有 已啟用Dynamic Media功能, 編輯影像本身必須在資產主控台中執行。

新一代Dynamic Media資產編輯 next-gen-dm-assets

如果您有 新一代Dynamic Media已設定,智慧型裁切 選項在元件的前後關聯功能表中可用。

智慧型裁切

使用對話方塊可調整智慧型裁切。

智慧型裁切對話方塊

TIP
如需智慧型裁切的詳細資訊,請參閱 這部關於此功能的影片。

設定對話方塊 configure-dialog

影像元件提供「設定」對話方塊,其中定義了影像本身及其說明和基本屬性。

資產標籤 asset-tab

影像元件之「設定」對話方塊的「資產」標籤

  • 從頁面繼承精選影像 — 此選項使用 連結頁面的精選影像 或未連結影像時目前頁面的精選影像。

  • 影像資產 — 如果符合下列條件,則會自動填入 從頁面繼承精選影像 已選取。 取消選取可透過設定以下選項來手動定義影像。

    • 將資產從 資產瀏覽器 或點選 瀏覽 選項,讓您可從本機檔案系統上傳。

    • 點選或按一下 清除 以取消選取目前選取的影像。

    • 點選或按一下 選取 以開啟 資產瀏覽器 以便選取影像。

      • 如果 新一代Dynamic Media功能 啟用時,您有多個選項可挑選資產:

        • 本機 從本機AEM資產庫選取。
        • 遠端 會從AEM例項之外的Dynamic Media資料庫中選取。
    • 點選或按一下 編輯管理資產的轉譯 在Asset Editor中。

  • 協助工具的替代文字 — 此欄位可讓您為視障使用者定義影像的說明。

    • 從頁面繼承替代文字 — 此選項使用連結資產值的替代說明, dc:description DAM中的中繼資料,或目前頁面的中繼資料(若未連結資產)。
  • 不提供替代文字 — 將影像標籤為被熒幕閱讀器等輔助技術忽略,以用於影像純粹起裝飾作用或不向頁面傳達額外資訊的情況。

中繼資料標籤 metadata-tab

影像元件「設定」對話方塊的「中繼資料」標籤

  • 預設集型別 — 這定義了可用的影像預設集型別,可以 影像預設集智慧型裁切、和僅在以下情況下可用: Dynamic Media功能 已啟用。

    • 影像預設集 — 時間 預設集型別影像預設集 已選取,下拉式清單 影像預設集 可使用,並允許從可用的Dynamic Media預設集中選擇。 這只有在為選取的資產定義了預設集時才能使用。
    • 智慧型裁切 — 時間 預設集型別智慧型裁切 已選取,下拉式清單 轉譯 可使用,並允許從所選資產的可用轉譯中進行選擇。 這只有在為選取的資產定義了轉譯時才可用。
    • 影像修飾元 — 您可以在此處定義其他Dynamic Media影像伺服命令,使用下列分隔符號: &,無論哪個 預設集型別 已選取。
  • 註解 — 影像的其他相關資訊,預設會顯示於影像下方。

    • 自DAM取得圖片說明 — 若勾選,影像的標題文字會填入 dc:title dam中的中繼資料。
    • 以快顯視窗顯示註解 — 檢查完畢後,註解不會顯示在影像下方,但如在某些瀏覽器中將滑鼠懸停在影像上,註解會以快顯模式顯示。
  • 連結 — 將影像連結至其他資源。

    • 使用選取對話方塊可連結至其他AEM資源。
    • 如果未連結至AEM資源,請輸入絕對URL。 非絕對URL會解譯為相對於AEM。
    • 在新標籤中開啟連結 — 此選項會在新的瀏覽器視窗中開啟連結。
  • ID — 此選項可讓您控制HTML中元件的唯一識別碼,以及 資料層.

    • 如果保留為空白,系統會自動為您產生唯一ID,並可透過檢查結果頁面找到該ID。
    • 若指定ID,作者應負責確認該ID為唯一ID。
    • 變更ID會對CSS、JS和資料層追蹤造成影響。
TIP
智慧型裁切影像預設集 是互斥選項。 如果作者必須使用影像預設集以及智慧型裁切轉譯,則作者必須使用 影像修飾元 以手動新增預設集。

樣式索引標籤 styles-tab-edit

影像元件「編輯」對話方塊的「樣式」索引標籤

影像元件支援AEM 樣式系統.

使用下拉式清單,選取要套用至元件的樣式。 在「編輯」對話方塊中所做的選取與從元件工具列中選擇的選取具有相同的效果。

您必須在以下位置為此元件設定樣式: 設計對話方塊 ,讓下拉式功能表可供使用。

設計對話方塊 design-dialog

主要標籤 main-tab

影像元件的設計對話方塊主索引標籤

  • 啟用DM功能 — 選取時, Dynamic Media功能 可用。

    • 此選項僅在環境中啟用Dynamic Media時顯示。
  • 啟用Web最佳化的影像 — 選取時, 網頁最佳化的影像傳遞服務 以WebP格式傳送影像,平均將影像大小減少25%。

    • 此選項僅在AEMaaCS中可用。
    • 取消勾選或Web最佳化的影像傳送服務無法使用時, 自我調整影像Servlet 已使用。
  • 停用延遲載入 — 選取後,元件會預先載入所有影像,而不會延遲載入。

  • 影像為裝飾性 — 定義將影像元件新增至頁面時,是否自動啟用裝飾性影像選項。

  • 自DAM取得替代文字 — 定義將影像元件新增至頁面時,是否自動啟用從DAM擷取替代文字的選項。

  • 自DAM取得圖片說明 — 定義將影像元件新增至頁面時,是否自動啟用從DAM擷取註解的選項。

  • 以快顯視窗顯示註解 — 定義將影像元件新增至頁面時,是否自動啟用以快顯視窗顯示影像註解的選項。

  • 調整寬度 — 此值用於調整作為DAM資產的基本影像的寬度。

    • 影像的外觀比例會保留。
    • 如果該值大於影像的實際寬度,則該值無效。
    • 此值對SVG影像沒有影響。

您可以定義影像的寬度(以畫素為單位),元件會根據瀏覽器大小自動載入最適當的寬度。 這是 回應式功能 影像元件的。

  • 寬度 — 定義影像的寬度(以畫素為單位),元件會根據瀏覽器大小自動載入最適當的寬度。

    • 點選或按一下 新增 按鈕以新增其他大小。

      • 使用抓取操作框可重新排列大小順序。
      • 使用 刪除 圖示可移除寬度。
    • 依預設,影像載入會延遲到影像可見為止。

      • 選取選項 停用延遲載入 這樣就能在頁面載入時載入影像。
  • JPEG品質 — 轉換(例如,縮放或裁切)的JPEG影像的品質係數(0到100的百分比)。

TIP
檢視檔案 自我調整影像Servlet 提供透過仔細定義寬度來最佳化轉譯選擇的秘訣。

樣式索引標籤 styles-tab

影像元件支援AEM 樣式系統.

Adobe使用者端資料層 data-layer

影像元件支援 Adobe使用者端資料層。

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c