AEM 6.3 core component: Image not displayed

Forum|Forum|8 years ago
June 29, 2017
8 replies
7728 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by smacdonald2008

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.

B

BigT168Author

Level 5

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

Responsive Design for Web Pages

smacdonald2008Accepted solution

Level 10

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.

A

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.

A

Ashwin_Raju

Level 3

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)