如何在 AEM 的 Teaser 组件中为图像添加 Alt 标签？答案

【问题标题】：How to add Alt tag for the image in the Teaser component in AEM?如何在 AEM 的 Teaser 组件中为图像添加 Alt 标签？
【发布时间】：2020-06-11 04:24:42
【问题描述】：

我想在 Teaser 组件中添加类似于 image 组件的 alt 标签。

OOTB 预告片组件使用数据狡猾的资源。

<sly data-sly-template.image="${@ teaser}">
    <div data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource}"></div>
</sly>

我可以在 data-sly-resource 上传递属性值吗？

    <div data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource @ alt = properties.alt}"></div>

提前致谢。

AEM 6.5 2.6.0 4.1.0

【问题讨论】：

标签： aem sightly aem-6 teaser aem-core-wcm-components

【解决方案1】：

在 HTL Sling 实现中，您可以在 data-sly-resource 上传递参数（使用请求属性 - 请参阅 SLING-5812）。但是，这需要图像的渲染知道这些并使用它们。

您似乎在使用AEM WCM Core Components，图像组件将尝试从alt property of the resource 获取alt 属性的数据。您可以包装资源并提供自定义 alt 属性来满足您的需求。

【讨论】：