Difference in Component on Local SDK vs RDE

[Cross_Leaf]

Hey guys,

I have been tweaking the OTB teaser component and been trying to validate it on my local and RDE.

The local output is as below -

While on RDE the image tag in HTML is not loading as seen below -

We're pushing the code with aio-plugin and the changes are reflecting promptly but the HTML for image which is defined in Sightly as below is coming in local but not RDE

<div class="image-container">
   <div class="teaser-image">
      <sly data-sly-call="${imageTemplate.image @ teaser=teaser}"></sly>
   </div>
</div>

Any pointers for the same?

[TarunKumar]

Hi @Cross_Leaf ,

Inspect the image element in RDE and see what you are seeing for image url if AEM is shortening the image src path on publish environment, you can confirm that by looking at Day CQ Link checker Transformer on the OSGI configs.

Then you need to match those rule with a rewrite or a mapping in dispatcher

RewriteCond %{REQUEST_URI} !^/apps
RewriteCond %{REQUEST_URI} !^/bin
RewriteCond %{REQUEST_URI} !^/content
RewriteCond %{REQUEST_URI} !^/etc
RewriteCond %{REQUEST_URI} !^/home
RewriteCond %{REQUEST_URI} !^/libs
RewriteCond %{REQUEST_URI} !^/saml_login
RewriteCond %{REQUEST_URI} !^/system
RewriteCond %{REQUEST_URI} !^/tmp
RewriteCond %{REQUEST_URI} !^/var
RewriteCond %{REQUEST_URI} (.html|.jpe?g|.png|.svg)$
RewriteRule ^/(.*)$ /content/${CONTENT_FOLDER_NAME}/$1 [PT,L]

-Tarun

[Cross_Leaf]

The image tag itself is not rendering - The problem I think is not related to the image URL.

[arunpatidar]

Hi @Cross_Leaf 
The image tag will render only if there is an image imageResource either from DAM or from page properties

<sly data-sly-template.image="${@ teaser}">
<div class="cmp-teaser__image" data-sly-test="${teaser.imageResource}" data-sly-resource="${teaser.imageResource @ wcmmode=disabled}"></div>
</sly>

https://github.com/adobe/aem-core-wcm-components/blob/main/content/src/content/jcr_root/apps/core/wc...