图像组件

核心组件图像组件是具有就地编辑功能的自适应图像组件。

使用

图像组件为页面访客提供了自适应图像选择和响应行为功能，包括延迟加载，以及为内容作者轻松放置图像和裁剪图像。

模板作者可以在设计对话框中定义图像宽度以及裁剪和其他设置。 内容编辑器可以上传或选择配置对话框中的资产，并在编辑对话框中裁剪图像。 为了更方便起见，还提供简单的图像就地修改。

响应功能

图像组件提供了开箱即用的强大响应功能。 在页面模板级别，可以使用设计对话框定义图像资产的默认宽度。 然后，图像组件将自动加载正确的宽度以根据浏览器窗口的大小显示。 在调整窗口大小时，图像组件会动态加载正确的图像大小。 组件开发人员无需担心定义自定义媒体查询，因为图像组件已经过优化以加载您的内容。

此外，图像组件还支持延迟加载，以便将实际图像资产的加载推迟到在浏览器中可见为止，从而提高页面的响应性。

Dynamic Media支持

图像组件(从版本2.13.0开始)支持Dynamic Media资产。 启用后， 这些功能允许您通过简单的拖放操作，或通过资产浏览器添加Dynamic Media图像资产，就像您使用任何其他图像一样。此外，还支持图像修饰符、图像预设和智能裁剪。

使用核心组件构建的Web体验不能提供功能丰富、Sensei支持、强大、高性能、跨平台的Dynamic Media图像功能。

版本和兼容性

图像组件的当前版本为v2，该版本于2018年1月随核心组件版本2.0.0一起引入，在本文档中进行了描述。

下表详细列出了组件的所有受支持版本、组件版本与之兼容的AEM版本，以及指向以前版本文档的链接。

有关核心组件版本和版本的更多信息，请参阅文档核心组件版本。

SVG支持

图像组件支持可缩放矢量图形(SVG)。

• 同时支持从DAM拖放SVG资产和从本地文件系统上传SVG文件。
• 自适应图像Servlet对原始SVG文件进行流式处理（跳过转换）。
• 对于SVG图像，“智能图像”和“智能大小”将在图像模型中设置为空数组。

安全

出于安全考虑，图像编辑器从不直接调用原始SVG。 它通过<img src=“path-to-component”>调用。 这会阻止浏览器执行嵌入在SVG文件中的任何脚本。

组件输出示例

要体验图像组件并查看其配置选项以及HTML和JSON输出的示例，请访问组件库。

技术详细信息

有关图像组件的最新技术文档，请参阅GitHub。

有关开发核心组件的更多详细信息，请参阅核心组件开发人员文档。

图像组件支持schema.org微数据。

配置对话框

除了标准的编辑对话框和设计对话框之外，图像组件还提供一个配置对话框，在其中定义了图像本身及其描述和基本属性。

“资产”选项卡

• 图像资产
  • 从资产浏览器中删除资产，或点按​browse​选项，以从本地文件系统上传。
  • 点按或单击​清除​以取消选择当前选定的图像。
  • 点按或单击​编辑 ，以在资产编辑器中管理资产的演绎版。

元数据选项卡

• 预设类型 — 此设置定义了可用的图像预设类型(图像预 设 器智能裁剪 )，并且仅在启用Dynamic Media功能​后 🔗 才可用。
  • 图像预设 — 选 择 预设类 型 图像 预设后，下拉图像预设将 可用，允许从可用的Dynamic Media预设中进行选择。仅当为选定的资产定义了预设时，此选项才可用。
  • 智能裁剪 — 选 择 预设 类型 智 ​​能裁剪时，下拉菜单可用，允许从选定资产的可用演绎版中进行选择。仅当为选定的资产定义了演绎版时，此选项才可用。
  • 图像修饰符 — 此处可以分隔其他Dynamic Media图像提供命令，无论选择哪种预 &设 ​​类型。
• 图像具有装饰性 — 检查图像是否应被辅助型技术忽略，因此不需要替换文本。这仅适用于装饰性图像。
• 替换文本 — 为视觉障碍读者提供图像含义或功能的替换文本。
  • 从DAM获取替换文本 — 选中此选项后，图像的替换文本将填充DAM中元 dc:description 数据的值。
• 标题 — 有关图像的其他信息，默认显示在图像下方。
  • 从DAM获取标题 — 选中此选项后，图像的标题文本将填充DAM中元 dc:title 数据的值。
  • 将题注显示为弹出窗口 — 选中此选项后，题注不会显示在图像下方，而是会在将鼠标悬停在图像上方时显示为某些浏览器显示的弹出窗口。
• 链接 — 将图像链接到其他资源。
  • 使用选择对话框链接到其他AEM资源。
  • 如果未关联到AEM资源，请输入绝对URL。 非溶质URL将解释为相对于AEM。
• ID — 利用此选项，可控制HTML和数据层中组件的唯一标识符 的唯一标识符。
  • 如果留为空白，则会自动为您生成唯一ID，并且可以通过检查生成的页面找到该ID。
  • 如果指定了ID，则作者有责任确保该ID是唯一的。
  • 更改ID可能会影响CSS、JS和数据层跟踪。

编辑对话框

编辑对话框允许内容作者裁剪、修改启动映射和缩放图像。

• 开始裁剪

  

  选择此选项将打开一个下拉列表，显示预定义的裁剪比例。

  • 选择选项​Free Hand​以定义您自己的裁剪。
  • 选择选项​删除裁剪​以显示原始资产。

  选择裁剪选项后，使用蓝色手柄调整图像上裁剪的大小。

  

• 向右旋转

  

  使用此选项将图像90°向右（顺时针）旋转。

• 水平翻转

  

  使用此选项可水平翻转图像或沿y轴旋转图像180°。

• 垂直翻转

  

  使用此选项可垂直翻转图像或沿x轴旋转图像180°。

• 重置缩放

  

  如果图像已缩放，则使用此选项可重置缩放级别。

• 打开缩放滑块

  

  使用此选项可显示一个滑块来控制图像的缩放级别。

  

就地编辑器也可用于修改图像。 由于空间限制，只有基本选项在线可用。 要获取完整编辑选项，请使用全屏模式。

“设计”对话框

设计对话框允许模板作者定义内容作者在使用此组件时拥有的裁剪、上传和旋转及上传选项。

主选项卡

在​主​选项卡上，您可以定义图像的宽度列表（以像素为单位），组件将根据浏览器大小自动加载最合适的宽度。 这是图像组件响应功能的重要部分。

此外，您还可以定义作者将组件添加到页面时自动或禁用的常规组件选项。

• 启用DM功能 — 选中此选项后，启用Dynamic Media 功能 将可用。
• 启用延迟加载 — 定义在将图像组件添加到页面时是否自动启用延迟加载选项。
• 图像具有装饰性 — 定义在向页面添加图像组件时是否自动启用装饰性图像选项。
• 从DAM获取替代文本 — 定义在将图像组件添加到页面时，是否自动启用从DAM检索替代文本的选项。
• 从DAM获取标题 — 定义在将图像组件添加到页面时，是否自动启用从DAM检索标题的选项。
• 将标题显示为弹出窗口 — 定义在将图像组件添加到页面时，是否自动启用将图像标题显示为弹出窗口的选项。
• 禁用UUID跟踪 — 选中此选项可禁用图像资产的UUID跟踪。
• 宽度 — 为图像定义宽度列表（以像素为单位），组件会根据浏览器大小自动加载最合适的宽度。
  • 点按或单击​Add​按钮以添加其他大小。
    • 使用抓握手柄重新排列大小的顺序。
    • 使用​删除​图标删除宽度。
  • 默认情况下，图像加载会延迟到可见为止。
    • 选择选项​禁用延迟加载 ，以在页面加载时加载图像。
• JPEG质量 — 已转换（例如，缩放或裁剪）JPEG图像的质量因子（以0和100的百分比表示）。

“功能”选项卡

在​功能​选项卡上，您可以定义在使用组件（包括上传选项、方向和裁剪选项）时，内容作者可以使用的选项。

• 源

  

  选择选项​允许从文件系统上传资产​以允许内容作者从其本地计算机上传图像。 要强制内容作者仅从AEM中选择资产，请取消选择此选项。

• 方向

  

• ​
  旋转使用此选项可允许内容作者使用
  右 旋。

• ​
  反向使用此选项可允许内容作者使用
  “水平翻 转”和“垂直 翻 转”选项。

  注意

  默认情况下，Flip​选项处于禁用状态。 启用此选项将在图像组件的编辑对话框中显示​垂直翻转​和​水平翻转​按钮，但AEM当前不支持该功能，并且不会保留使用这些选项所做的任何更改。

• 裁剪

  

  选择选项​允许裁剪 ，以允许内容作者在编辑对话框中裁剪组件中的图像。

  • 单击​Add​以添加预定义的裁剪宽高比。
  • 输入描述性名称，该名称将显示在​开始裁剪​下拉列表中。
  • 输入宽高比的数值。
  • 使用拖动手柄重新排列长宽比的顺序
  • 使用垃圾桶图标删除宽高比。
  注意

  请注意，在AEM中，裁剪长宽比被定义为​高度/宽度。 这与常见的宽高比的定义不同，这样做是出于对旧版兼容性的考虑。只要您提供了比率的明确名称，内容作者便不会察觉到任何差异，因为该名称会显示在UI中，而不是比率本身。

“样式”选项卡

图像组件支持AEM 样式系统。

自适应图像Servlet

图像组件使用核心组件的自适应图像Servlet。 自适应图像 服务器负责图像处理和流处理，开发人员可以利用它们自 定义核心组件。

Adobe客户端数据层

图像组件支持Adobe客户端数据层。