Expand my Community achievements bar.

SOLVED

Given a DAM asset path, how do we render an image component?

Avatar

Level 5

AEMaaCS / 6.5 using the core components.

 

I have a path to a DAM asset, like: /content/dam/mysite/carousel/images/API-2020x512.png

 

I want to render either apps/mysite/components/images or core/wcm/components/image/v3/image.

 

How do I do this in sightly?

 

I tried something like this, which results in a server error (out of memory exception???):

 

<sly data-sly-resource="${ hero.imageReferencePath @ wcmmode=disabled }" data-sly-test="${ hero.hasImage }"></sly>

 

getImageReferencePath is returning the path to the DAM asset accordingly.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @dylanmccurry ,

I don't think AEM have anything OOTB functionality to render image component based on asset path.

However, you can set the image as a background of tag/attribute who's value is coming from DAM asset as below.

<div class="hero" style="background-image:url('${properties.bgimage @ context='styleString'}');" >

Hope that helps!

Regards,

Santosh 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @dylanmccurry ,

I don't think AEM have anything OOTB functionality to render image component based on asset path.

However, you can set the image as a background of tag/attribute who's value is coming from DAM asset as below.

<div class="hero" style="background-image:url('${properties.bgimage @ context='styleString'}');" >

Hope that helps!

Regards,

Santosh 

Avatar

Community Advisor

Hello @dylanmccurry 

 

Instead of trying to use the Image component to render, can you try using the image path itself in the src attribute of <img>. 

You could append the selector of Adaptive Image servlet to Image path itself. You might not be able to use all features of Image component, but the ones that are available by this option might suffice the need.

 

 


Aanchal Sikka