無頭圖AEM像

影像是 發展豐富而富有吸引力AEM的無頭體驗。 無AEM頭支援映像資產的管理及其優化交付。

用於無頭內容建AEM模的內容片段，通常引用影像資源，以便在無頭體驗中顯示。 可AEM以編寫GraphQL查詢，以根據引用影像的位置為影像提供URL。

的 ImageRef 類型具有三個內容引用的URL選項：

• _path 是中引用的路AEM徑，且不包AEM括源（主機名）
• _authorUrl 是AEM作者上影像資產的完整URL
  • AEM作者 可用於提供無頭應用程式的預覽體驗。
• _publishUrl 是AEM發佈上影像資產的完整URL
  • AEM發佈 通常是無頭應用程式的生產部署顯示映像的位置。

根據以下條件，最好使用這些欄位：

使用 _authorUrl 和 _publishUrl 應與用AEM於源GraphQL響應的GraphQL終結點對齊。

內容片段模型

確保包含影像引用的「內容片段」欄位是 內容引用 資料類型。

在 內容片段模型，通過選擇欄位並檢查 屬性 的上界。

GraphQL永續查詢

在GraphQL查詢中，將欄位返回為 ImageRef 類型，並請求相應的欄位 _path。 _authorUrl或 _publishUrl 應用程式所需的。 例如，查詢 WKND參考演示項目 並在其中包括影像資產引用的影像URL primaryImage 欄位，可以使用新的永續查詢 wknd-shared/adventure-image-by-path 定義為：

query ($path: String!) {
  adventureByPath(_path: $path) {
    item {
      title,
      primaryImage {
        ... on ImageRef {
          _path
          _authorUrl
          _publishUrl
        }
      }
    }
  }
}

的 $path 在 _path 篩選器需要內容片段的完整路徑(例如 /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp)。

GraphQL響應

生成的JSON響應包含包含映像資產的URls的請求欄位。

{
  "data": {
    "adventureByPath": {
      "item": {
        "adventurePrimaryImage": {
          "_path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg",
          "_authorUrl": "https://author-p123-e456.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg",
          "_publishUrl": "https://publish-p123-e789.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg"
        }
      }
    }
  }
}

要在應用程式中載入引用的映像，請使用相應的欄位， _path。 _authorUrl或 _publishUrl 的 adventurePrimaryImage 作為影像的源URL。

的域 _authorUrl 和 _publishUrl 由AEMas a Cloud Service使用 外部化器。

在React中，顯示AEM Publish中的影像如下所示：

<img src={ data.adventureByPath.item.primaryImage._publishUrl } />

影像格式副本

映像資產支援可定製 格式，是原始資產的替代表。 自定義格式副本有助於優化無頭體驗。 與請求原始影像資產（通常是大型高解析度檔案）不同，優化的格式副本可由無頭應用程式請求。

建立格式副本

AEM Assets管理員使用「處理配置檔案」定義自定義格式副本。 然後，「處理配置檔案」可以直接應用於特定資料夾樹或資產，以便為這些資產生成格式副本。

處理設定檔

資產格式副本規範在中定義 處理配置檔案 由AEM Assets管理人負責。

建立或更新「處理配置檔案」，並添加無頭應用程式所需的影像大小的格式副本定義。 格式副本可以命名為任何內容，但應在語義上命名。

在此示例中，將建立三個格式副本：

上表中調用的屬性非常重要：

• 格式副本名稱 用於請求格式副本。
• 擴展 是用於請求 格式副本名稱。
• 最大寬度 用於根據在無頭應用程式中的使用情況通知開發人員應該使用哪些格式副本。

格式副本定義取決於無頭應用程式的需要，因此請確保為使用案例定義最佳格式副本集，並在使用方式方面以語義命名。

重新處理資產

建立（或更新）「處理配置檔案」後，重新處理資產以生成在「處理配置檔案」中定義的新格式副本。 在使用處理配置檔案處理資產之前，將不存在新格式副本。

• 最好， 已將「處理配置檔案」分配給資料夾 因此，任何新資產都會自動生成格式副本。 現有資產必須採用下面的臨時辦法重新處理。

• 或者，通過選擇資料夾或資產，選擇 重新處理資產，然後選擇新的「處理配置檔案」名稱。

  

查看格式副本

格式副本可通過 開啟資產的格式副本視圖，並在格式副本欄中選擇新格式副本以進行預覽。 如果缺少格式副本， 確保使用處理配置檔案處理資產。

發佈資產

確保具有新格式副本的資產 （重新發佈） 因此，新格式副本可在AEM Publish（AEM發佈）上訪問。

訪問格式副本

通過附加 格式副本名稱 和 格式副本擴展 在「處理配置檔案」中定義到資產的URL。

GraphQL查詢

AEMGraphQL確實需要額外語法來請求影像格式副本。 但 影像查詢 以常規方式，並以代碼形式指定所需的格式副本。 重要的是 確保無頭應用程式使用的影像資產具有同名格式副本。

反應示例

讓我們建立一個簡單的「反應」應用程式，該應用程式顯示單個影像資產的三個格式副本：小、中和大。

建立影像元件

建立呈現影像的「反應」元件。 此元件接受四個屬性：

• assetUrl:通過GraphQL查詢的響應提供的影像資產URL。
• renditionName:要載入的格式副本的名稱。
• renditionExtension:要載入的格式副本的擴展。
• alt:影像的Alt文本；輔助功能非常重要！

此元件構建 格式副本URL，使用中概述的格式 訪問格式副本。 安 onError 處理程式設定為在格式副本丟失時顯示原始資產。

此示例使用原始資產url作為 onError 處理程式，在該事件中缺少格式副本。

// src/Image.js

export default function Image({ assetUrl, renditionName, renditionExtension, alt }) {
  // Construct the rendition Url in the format:
  //   <ASSET URL>/_jcr_content/renditions<RENDITION NAME>.<RENDITION EXTENSION>
  const renditionUrl = `${assetUrl}/_jcr_content/renditions/${renditionName}.${renditionExtension}`;

  // Load the original image asset in the event the named rendition is missing
  const handleOnError = (e) => { e.target.src = assetUrl; }

  return (
    <>
      <img src={renditionUrl}
            alt={alt}
            onError={handleOnError}/>
    </>
  );
}

定義 App.js

這個簡單 App.js 查AEM詢冒險影像，然後顯示該影像的三個格式副本：小、中和大。

在自定AEM義React掛接中執行查詢 使用無頭SDKAEM的AdventureByPath。

查詢結果和特定格式副本參數將傳遞給 影像反應元件。

// src/App.js

import "./App.css";
import { useAdventureByPath } from './api/persistedQueries'
import Image from "./Image";

function App() {

  // Get data from AEM using GraphQL persisted query as defined above
  // The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
  let { data, error } = useAdventureByPath("/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp");

  // Wait for GraphQL to provide data
  if (!data) { return <></> }

  return (
    <div className="app">

      <h2>Small rendition</h2>
      {/* Render the small rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="small"
        renditionExtension="jpeg"
        alt={data.adventureByPath.item.title}
      />

      <hr />

      <h2>Medium rendition</h2>
      {/* Render the medium rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="medium"
        renditionExtension="jpeg"
        alt={data.adventureByPath.item.title}
      />

      <hr />

      <h2>Large rendition</h2>
      {/* Render the large rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="large"
        renditionExtension="jpeg"
        alt={data.adventureByPath.item.title}
      />
    </div>
  );
}

export default App;

Business.Adobe.com資源