用 AEM Headless 优化的图像 images-with-aem-headless

图像是的关键方面 开发丰富、引人注目的AEM Headless体验. AEM Headless支持管理图像资源及其优化交付。

AEM Headless内容建模中使用的内容片段,通常引用要在Headless体验中显示的图像资源。 可以写入AEM GraphQL查询以根据从何处引用图像的位置向图像提供URL。

ImageRef 对于内容引用,类型有四个URL选项:

  • _path 是AEM中的引用路径,不包含AEM源(主机名)
  • _dynamicUrl 是用于图像资产的Web优化投放的URL。
    • _dynamicUrl 不包括AEM源,因此域(AEM Author或AEM Publish服务)必须由客户端应用程序提供。
  • _authorUrl 是AEM创作实例上图像资源的完整URL
    • AEM创作 可用于提供headless应用程序的预览体验。
  • _publishUrl 是AEM Publish上图像资源的完整URL
    • AEM发布 通常是Headless应用程序的生产部署从中显示图像的地方。

_dynamicUrl 是用于图像资产投放的推荐URL,应当取代使用 _path_authorUrl、和 _publishUrl 尽可能。

AEM as a Cloud Service
AEMAS A CLOUD SERVICERDE
AEM SDK
AEM 6.5
支持Web优化图像?

内容片段模型

确保包含图像引用的内容片段字段为 内容引用 数据类型。

字段类型可在 内容片段模型,通过选择字段,并检查 属性 在右边按Tab键。

包含对图像的内容引用的内容片段模型

GraphQL持久查询

在GraphQL查询中,将字段返回为 ImageRef 类型,并请求 _dynamicUrl 字段。 例如,在 WKND站点项目 并将其中的图像资产引用包含图像URL primaryImage 字段,可使用新的持久查询完成 wknd-shared/adventure-image-by-path 定义为:

query($path: String!, $imageFormat: AssetTransformFormat=JPG, $imageSeoName: String, $imageWidth: Int, $imageQuality: Int) {
  adventureByPath(
    _path: $path
    _assetTransform: {
      format: $imageFormat
      width: $imageWidth
      quality: $imageQuality
      preferWebp: true
    }
  ) {
    item {
      _path
      title
      primaryImage {
        ... on ImageRef {
          _dynamicUrl
        }
      }
    }
  }
}

查询变量

{
  "path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp",
  "imageFormat": "JPG",
  "imageWidth": 1000,
}

$path 中使用的变量 _path 过滤器需要内容片段的完整路径(例如 /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp)。

_assetTransform 定义 _dynamicUrl 构建用于优化提供的图像演绎版。 Web优化图像URL也可通过更改URL的查询参数在客户端进行调整。

GraphQL参数
描述
必填
GraphQL变量值
format
图像资源的格式。
GIFPNGPNG8JPGPJPGBJPGWEBPWEBPLLWEBPLY
seoName
URL中文件段的名称。 如果未提供,则使用图像资产名称。
字母数字, -,或 _
crop
裁切框架从图像中删除,必须在图像大小范围内
正整数,定义原始图像尺寸范围内的裁切区域
size
输出图像的大小(高度和宽度),以像素为单位。
正整数
rotation
图像的旋转(以度为单位)。
R90R180R270
flip
翻转图像。
HORIZONTALVERTICALHORIZONTAL_AND_VERTICAL
quality
图像质量占原始质量的百分比。
1-100
width
输出图像的宽度(像素)。 时间 size 提供 width 将被忽略。
正整数
preferWebP
如果 true 并且,如果浏览器支持WebP,则AEM将为其提供服务,而不考虑 format.
truefalse

GraphQL响应

生成的JSON响应包含所请求的字段,这些字段包含图像资产的Web优化URL。

{
  "data": {
    "adventureByPath": {
      "item": {
        "_path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp",
        "title": "Bali Surf Camp",
        "primaryImage": {
          "_dynamicUrl": "/adobe/dynamicmedia/deliver/dm-aid--a38886f7-4537-4791-aa20-3f6ef0ac3fcd/adobestock_175749320.jpg?preferwebp=true&width=1000&quality=80"
        }
      }
    }
  }
}

要在应用程序中加载引用图像的Web优化图像,请使用 _dynamicUrlprimaryImage 作为图像的源URL。

在React中,从AEM Publish显示Web优化图像如下所示:

// The AEM host is usually read from a environment variable of the SPA.
const AEM_HOST = "https://publish-p123-e456.adobeaemcloud.com";
...
let dynamicUrl = AEM_HOST + data.adventureByPath.item.primaryImage._dynamicUrl;
...
<img src={dynamicUrl} alt={data.adventureByPath.item.title}/>

请记住, _dynamicUrl 不包括AEM域,因此您必须提供所需的源来解析图像URL。

响应式URL

上例显示了使用单大小图像,但在Web体验中,通常需要响应式图像集。 响应式图像可以使用实现 img srcsets图片元素. 以下代码片段显示了如何使用 _dynamicUrl 作为基地。 width 是一个URL参数,随后可附加到该参数 _dynamicUrl 用于为不同的响应视图供电。

// The AEM host is usually read from a environment variable of the SPA.
const AEM_HOST = "https://publish-p123-e456.adobeaemcloud.com";
...
// Read the data from GraphQL response
let dynamicUrl = AEM_HOST + data.adventureByPath.item.primaryImage._dynamicUrl;
let alt = data.adventureByPath.item.title;
...
{/*-- Example img srcset --*/}
document.body.innerHTML=`<img>
    alt="${alt}"
    src="${dynamicUrl}&width=1000}"
    srcset="`
      ${dynamicUrl}&width=1000 1000w,
      ${dynamicUrl}&width=1600 1600w,
      ${dynamicUrl}&width=2000 2000w,
      `"
    sizes="calc(100vw - 10rem)"/>`;
...
{/*-- Example picture --*/}
document.body.innerHTML=`<picture>
      <source srcset="${dynamicUrl}&width=2600" media="(min-width: 2001px)"/>
      <source srcset="${dynamicUrl}&width=2000" media="(min-width: 1000px)"/>
      <img src="${dynamicUrl}&width=400" alt="${alt}"/>
    </picture>`;

React示例

让我们创建一个简单的React应用程序,它按以下方式显示Web优化图像 响应式图像模式. 响应式图像有两种主要模式:

带有srcset的Img元素

带有srcset的Img元素sizes 属性,以便为不同的屏幕大小提供不同的图像资源。 为不同屏幕大小提供不同的图像资源时,图像源非常有用。

图片元素

图片元素 与多个一起使用 source 元素,以便为不同的屏幕大小提供不同的图像资源。 当为不同屏幕大小提供不同的图像呈现时,图片元素很有用。

示例代码

这个简单的React应用程序使用 AEM Headless SDK 查询AEM Headless API以获取冒险内容,并使用以下方法显示Web优化图像 带有srcset的img元素图片元素. 此 srcsetsources 使用自定义 setParams 用于将Web优化投放查询参数附加到 _dynamicUrl 因此,请根据Web客户端的需求更改交付的图像演绎版。

在自定义React挂接中执行针对AEM的查询 useAdventureByPath,使用AEM Headless SDK.

// src/App.js

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

const AEM_HOST = process.env.AEM_HOST;

function App() {

  /**
   * Update the dynamic URL with client-specific query parameters
   * @param {*} imageUrl the image URL
   * @param {*} params the AEM web-optimized image query parameters
   * @returns the dynamic URL with the query parameters
   */
  function setOptimizedImageUrlParams(imageUrl, params) {
    let url = new URL(imageUrl);
    Object.keys(params).forEach(key => {
      url.searchParams.set(key, params[key]);
    });
    return url.toString();
  }

  // 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
  // The 2nd parameter define the base GraphQL query parameters used to request the web-optimized image
  let { data, error } = useAdventureByPath(
        "/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp",
        { imageFormat: "JPG" }
      );

  // Wait for AEM Headless APIs to provide data
  if (!data) { return <></> }

  const alt = data.adventureByPath.item.title;
  const imageUrl =  AEM_HOST + data.adventureByPath.item.primaryImage._dynamicUrl;

  return (
    <div className="app">

      <h1>Web-optimized images</h1>

      {/* Render the web-optimized image img with srcset for the Adventure Primary Image */}
      <h2>Img srcset</h2>

      <img
        alt={alt}
        src={setOptimizedImageUrlParams(imageUrl, { width: 1000 })}
        srcSet={
            `${setOptimizedImageUrlParams(imageUrl, { width: 1000 })} 1000w,
             ${setOptimizedImageUrlParams(imageUrl, { width: 1600 })} 1600w,
             ${setOptimizedImageUrlParams(imageUrl, { width: 2000 })} 2000w`
        }
        sizes="calc(100vw - 10rem)"/>

       {/* Render the web-optimized picture for the Adventure Primary Image */}
        <h2>Picture element</h2>

        <picture>
          {/* When viewport width is greater than 2001px */}
          <source srcSet={setOptimizedImageUrlParams(imageUrl, { width : 2600 })} media="(min-width: 2001px)"/>
          {/* When viewport width is between 1000px and 2000px */}
          <source srcSet={setOptimizedImageUrlParams(imageUrl, { width : 2000})} media="(min-width: 1000px)"/>
          {/* When viewport width is less than 799px */}
          <img src={setOptimizedImageUrlParams(imageUrl, { width : 400, crop: "550,300,400,400" })} alt={alt}/>
        </picture>
    </div>
  );
}

export default App;
recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4