How to add Alt tag for the image in the Teaser component in AEM?

Question

I would like to add the alt tag similar to the image component in the teaser component.

The OOTB teaser component uses data-sly-resource.

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

Can I pass attribute values on data-sly-resource?

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

Thanks in advance.

AEM 6.5 2.6.0 4.1.0

Answer 1

In the HTL Sling implementation you can pass parameters on data-sly-resource (using request attributes - see SLING-5812). However, this would require the rendering of the image to be aware of these and use them.

As you seem to be using AEM WCM Core Components, the image component will try to fetch the data for alt attribute from the alt property of the resource. You could wrap the resource and provide a custom alt property to get around to what you need.