核心组件图像组件是自适应图像组件。
图像组件具有自适应图像选择和响应式行为,页面访客可以延迟加载,内容作者可以轻松放置图像。
内容作者可使用“编辑”对话框编辑图像资源,如应用裁切或旋转图像。
模板作者可以在“设计”对话框中定义图像宽度以及其他设置。内容编辑者可以在“配置”对话框中上传或选择资源。
图像组件的当前版本是 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 图像资源。此外还支持图像修饰符、图像预设和智能裁切。
使用核心组件构建的 Web 体验现在具备丰富、支持 Sensei、可靠、高性能、跨平台的 Dynamic Media 图像功能。
图像组件(从版本 2.23.2 起)支持新一代 Dynamic Media 远程资源。
配置后,即可从远程新一代 Dynamic Media 服务为您的图像组件选择资源。
图像组件支持可缩放矢量图 (SVG)。
为安全起见,图像编辑器从不直接调用原始 SVG。通过 <img src=“path-to-component”>
调用它。这可以防止浏览器执行在 SVG 文件中嵌入的任何脚本。
要体验图像组件并查看其配置选项示例以及 HTML 和 JSON 输出,请访问组件库。
在 GitHub 上可找到有关图像组件的最新技术文档。
在核心组件开发人员文档中可找到有关开发核心组件的其他详细信息。
图像组件支持 schema.org 微数据。
利用“编辑”对话框,内容作者可以裁切和缩放图像。
根据是否启用了 Dynamic Media 或新一代 Dynamic Media 功能,对于编辑图像可用的选项将有所不同。
如果编辑标准 AEM 资源,可在图像组件的上下文菜单中单击编辑图标。
开始裁切
选择此选项将打开一个预定义裁切比例的下拉菜单。
选择一个裁切选项后,可使用蓝色手柄调整图像上的裁切大小。
向右旋转
使用此选项可将图像向右(顺时针)旋转 90°。
重置缩放
如果图像已缩放,使用此选项可重置缩放级别。
打开缩放滑块
使用此选项可显示用于控制图像的缩放级别的滑块。
就地编辑器也可以用于修改图像。由于有空间限制,因此仅将基本选项排成一行。对于完整的编辑选项,请使用全屏模式。
GIF 图像不支持编辑图像的操作。将不保留在编辑模式下对 GIF 作出的任何此类更改。
如果启用了 Dynamic Media 功能,则必须在资源控制台中执行对图像本身的编辑。
如果配置了新一代 Dynamic Media,则在组件的上下文菜单中有智能裁切选项可用。
使用对话框调整智能裁切。
有关智能裁切的详细信息,请观看这段关于该功能的视频。
图像组件提供了一个“配置”对话框,其中定义了图像本身及其描述和基本属性。
从页面继承精选图像 – 此选项使用链接页面的精选图像或当前页面的精选图像(如果未链接图像)。
图像资源 - 如果选中了从页面继承特色图像,则自动填充此项。取消选中可通过设置以下选项而手动定义图像。
用于辅助功能的替换文本 - 此字段允许您为视障用户定义图像的描述。
dc:description
元数据的链接资源值的替代描述或当前页面的替代描述(如果未链接资源)。不提供替换文本 – 此选项将图像标记为被屏幕阅读器等辅助技术忽略,以用于图像纯粹起装饰作用或不向页面传达额外信息的情况。
&
分隔。dc:title
元数据的值填充图像的题注文本。智能裁切和图像预设为互斥选项。如果作者需要使用图像预设配合智能裁切演绎版,则作者必须使用图像修饰符手动添加预设。
图像组件支持 AEM 样式系统。
使用下拉菜单选择要应用于该组件的样式。在“编辑”对话框中所做的选择与从组件工具栏中选择的操作效果相同。
必须在“设计”对话框中为此组件配置样式,以便下拉菜单可用。
您可以定义图像的宽度(以像素为单位),组件将根据浏览器的大小自动加载最合适的宽度。这是图像组件的响应式功能的重要组成部分。
查看文档自适应图像 Servlet 以了解通过仔细定义宽度来优化演绎版选择的提示。
图像组件支持 AEM 样式系统。
图像组件支持 Adobe 客户端数据层。