Add itemprop attribute to img tag created by amp-img

Question

I am currently working on creating an e-commerce product detail page using AMP. As part of the work, I want to be able to provide valid structured data for each product to assist with SEO.

I'm running into an issue trying to add the structured data attribute of itemprop="image" to the product's hero image that is being rendered by using amp-img. From what I can tell, there is no way to apply custom attributes to the img tag that amp-img will ultimately render.

My existing markup:

<amp-img on="tap:hero-zoom-lightbox" src="--REDACTED--" [src]="productState.currentHeroImg" width="260" height="260" layout="responsive"
class="hero-carousel-image" role="button" tabindex="0" itemprop="image"></amp-img>

What gets rendered:

<amp-img itemprop="image" tabindex="0" role="button" class="hero-carousel-image amp-carousel-slide i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" layout="responsive" height="260" width="260" data-amp-bind-src="productState.currentHeroImg" i-amphtml-binding="" src="--REDACTED--" on="tap:hero-zoom-lightbox" i-amphtml-layout="responsive" aria-hidden="false">
    <i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
    <img decoding="async" src="--REDACTED--" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>

What I'm looking for (itemprop="image" attribute is on the img tag itself):

<amp-img tabindex="0" role="button" class="hero-carousel-image amp-carousel-slide i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" layout="responsive" height="260" width="260" data-amp-bind-src="productState.currentHeroImg" i-amphtml-binding="" src="--REDACTED--" on="tap:hero-zoom-lightbox" i-amphtml-layout="responsive" aria-hidden="false">
    <i-amphtml-sizer style="padding-top: 100%;"></i-amphtml-sizer>
    <img itemprop="image" decoding="async" src="--REDACTED--" class="i-amphtml-fill-content i-amphtml-replaced-content">
</amp-img>

Does anyone have any insight into whether or not this is possible? If not, any reason why implementing such behavior would break AMP paradigms?

Answer 1

I resolved this issue by using adding itemprop="image" in the surrounding anchor tag

This way it'll resolve the SEO error and would validate on AMP validator as well.

I previously tried using a hidden image element which solved the SEO issue but resulted in AMP validation error <img src="/imgUrl" alt="/altUrl" itemprop="image" class="hidden" />