Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

AEM 6.3 core component: Image not displayed

Avatar

Level 6

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.

1 Accepted Solution

Avatar

Correct answer by
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.

View solution in original post

8 Replies

Avatar

Level 6

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

Responsive Design for Web Pages

Avatar

Correct answer by
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.

Avatar

Level 1

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?

Avatar

Level 1

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.

Avatar

Level 1

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.

Avatar

Level 4

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)

Avatar

Level 10

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