用 AEM Headless 优化的图像 images-with-aem-headless
图像是的关键方面 开发丰富、引人注目的AEM Headless体验. AEM Headless支持管理图像资源及其优化交付。
AEM Headless内容建模中使用的内容片段,通常引用要在Headless体验中显示的图像资源。 可以写入AEM GraphQL查询以根据从何处引用图像的位置向图像提供URL。
此 ImageRef
对于内容引用,类型有四个URL选项:
此 _dynamicUrl
是用于图像资产投放的推荐URL,应当取代使用 _path
, _authorUrl
、和 _publishUrl
尽可能。
内容片段模型
确保包含图像引用的内容片段字段为 内容引用 数据类型。
字段类型可在 内容片段模型,通过选择字段,并检查 属性 在右边按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的查询参数在客户端进行调整。
format
GIF
, PNG
, PNG8
, JPG
, PJPG
, BJPG
, WEBP
, WEBPLL
, WEBPLY
seoName
-
,或 _
crop
size
rotation
R90
、R180
、R270
flip
HORIZONTAL
、VERTICAL
、HORIZONTAL_AND_VERTICAL
quality
width
size
提供 width
将被忽略。preferWebP
true
并且,如果浏览器支持WebP,则AEM将为其提供服务,而不考虑 format
.true
、false
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优化图像,请使用 _dynamicUrl
的 primaryImage
作为图像的源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元素
带有srcset的Img元素 与 sizes
属性,以便为不同的屏幕大小提供不同的图像资源。 为不同屏幕大小提供不同的图像资源时,图像源非常有用。
图片元素
图片元素 与多个一起使用 source
元素,以便为不同的屏幕大小提供不同的图像资源。 当为不同屏幕大小提供不同的图像呈现时,图片元素很有用。
示例代码
这个简单的React应用程序使用 AEM Headless SDK 查询AEM Headless API以获取冒险内容,并使用以下方法显示Web优化图像 带有srcset的img元素 和 图片元素. 此 srcset
和 sources
使用自定义 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;