Overlayed Image Component(V1) not rendering Images wi...

[samikshaa223429]

Behaviour of Image component.
COMPONENT DESCRIPTION :
We have overlayed the Image Component from AEM core components ( resourceSuperType = core/wcm/components/image/v1/image) in our own project under /apps/bmc/components/content/image folder. It uses
<img src="${image.src}"
title="${image.title}"/>
to display Image on page load .

ISSUE REPORTED : The Image component does not render images on the page and is only displaying title if added. The links on view source are as below :
PUBLISH environment link --> /content/projectfolder/taxonomy1/taxonomy2/taxonomy3//../../../asset2.html.img.jpeg/1562307241129/ss-asset-web-750x400-1.jpeg
Author environment link --> /content/projectfolder/taxonomy1/taxonomy2/taxonomy3/../../../../../ss_asset2.img.jpeg/1580828984432/ss-asset-web-750x400-1.jpeg

The publish environment image component <img src=""> links have ".html.img.jpe" appended which is causing images to not load. If we remove the .html it should work fine.
The component works fine on AEM 6.3.3 environment and is failing on 6.5.3 only.

NOT A DISPATCHER ISSUE :
It turns out this problem can indeed be reproduced on pages that are not served through the dispatcher/apache stack.

AFTER CHANGING TO V2 IMAGE COMPONENT : We tried replacing resourceSuperType from resourceSuperType = core/wcm/components/image/v1/image) to resourceSuperType = core/wcm/components/image/v2/image) it still fails , however If we replace the <img src="${image.src}" > to <img src="${image.fileReference}" , i.e pointing images directly to DAM links , it works fine, But Images are not loaded with proper renditions and this is not a viable solution.

. The custom link checker in our project does not handle any<img> tag specifically and is designed to work on <a href> only. Could this be because we are missing any configuration in Out of the box LinkChecker in AEM 6.5.3

Let me know if you need any more details.

Thanks,
Samiksha.

[imadullakhan · Accepted solution]

Hi samikshaa,

<img src="${image.fileReference}"> instead of use this <img src="${image.fileReference @CONTEXT = 'html'}">.and try to visit (resolve) the Issue?

[samikshaa223429]

But i want to use <img src="${image.src}"> tag instead of <img src="${image.fileReference}"> , will the solution work for this as well.

[imadullakhan]

Yes it will work for the solution try to use like this <img src="${image.src @CONTEXT='html'}"> (resolve) the Issue?