AEM 6.3 core component: Image not displayed

[BigT168]

Per Adobe, I created proxy to use the image core component in AEM 6.3.

After drag and drop the image, the image is displayed in the dialog correctly. However, once finish the authoring, I don't see the image is displayed in the page. If I remove the line "<noscript data-sly-unwrap="${!image.json}" data-cmp-image="${image.json}">" in the image.html, then the image is displayed.

I know I probably miss something, just wonder where I have to add which library in order for the image is displayed properly.

I have tried the image component from we retail. If I drag/drop the component under weretail content tree, it is fine; if I drag and drop to the content tree I created, I see the same behavior.

Thanks a lot.

[BigT168]

Found this document, will follow to add the necessary libraries to see if it fixes the issue.

Responsive Design for Web Pages

[smacdonald2008 · Accepted solution]

Just an FYI.. In Aug 2017 - we will be conducting an Ask the AEM Community Experts session of Core Components and will cover the Image component as part of that.

Also - we do successfully use an Core Image component in this article:

Developing your first Experience Manager 6.3 Components

At the end of the article - you can see the We Retail image displayed.

[dPatel01]

Even I am getting exact same issue. Did you find out the solution?  It will be great help if you can give more inputs on same.

Also are you losing responsiveness of image due to this or thats due to responsive grid in We.Retail?

[dPatel01]

BigT168​   I guess you can replace "<noscript data-sly-unwrap="${!image.json}" data-cmp-image="${image.json}">"   with   "<section data-sly-unwrap="${!image.json}" data-cmp-image="${image.json}">"   then it will fix that particular issue. However I am not getting responsiveness even after configuring the policies in "Design" mode. Any findings will help.

[Alex_Lockhart]

The issue is that the client library is not included on the page. I added the client lib as shown below:

<sly data-sly-call="${clientLib.all @ categories='core.wcm.components.image.v1'}" />

I added this at the page level for testing, however it might be more appropriate to add the client library at a component level. It looks like the Adobe article, Developing your first Experience Manager 6.3 Components, used the We.Retail site as a starting point and so the client lib was already included. I did not investigate to see how the We.Retail site was including the client lib.

[Ashwin_Raju]

I faced the same issue and it got fixed by using core-component version 2.0 and above (depends on the AEM version you use and compatibility)

[smacdonald2008]

That is a great point - when using Core Components - you should be using V2.

[BigT168]

Thanks.