URL for image added in container changes

[nikita24tailor]

I have added a container on the site page and in that container I have inserted an image for the background as shown in the snippet.

The problem is that when this image is rendered on the page, the url created for the image is as follows: "\2f content\2f dam\2f project-name\2f cmp-home-page\2f image.png" whereas the URL should have been "/content/dam/project-name/cmp-home-page/image.png". Other than these background images, all images' URLs are fine. Though there is no problem in the image and it's rendition but when I search for the same image URL, it shows 404 error. I want to know why only background image URL is being changed and how can I correct it.

[Anmol_Bhardwaj]

What you're seeing is an encoded URL in src. You would need to check where it is getting encoded.

Can you please check the underlying code, 

1. If the SRC is going through any java code which is encoding it.
2. If the SRC is obtained from or processed through any JS code which has encoded it.

Also, try to do the same with an OOTB component on your page and you can cut down the files frem template to a component. Because if even OOTB is showing the same issue, then maybe an overlay or JS which is running on the whole page/site.

[nikita24tailor]

The same happens in WKND site container image. It's also showing the same URL containing \2f.

[Anmol_Bhardwaj]

Okay, now to even further reduce the number of places you need to look.

Try both the components, but within WKND site page.

This can let you know whether the issue is with the template or some overlay which has been done to OOTB feature.

[nikita24tailor]

I have checked for the container code and didn't find any encoding of the URL. Is there any other way than creating OOTB component. Like, for normal Image component the URL remains same. Same is the case with Teaser. The uRL changes only for container image.

[Anmol_Bhardwaj]

Yes, there are many ways, but what we were trying to do was find the root cause of the issue. Whether it lies within the component or within something which we have overlaid. 

If you want to use a different way altogether, you would need to write HTL for the container component and call the image template, or image component which is working fine taking the image resource or template.

[nikita24tailor]

I found this property in simple.html and responsiveGrid.html of Container: style="${container.backgroundStyle @ context='styleString'}">. When I changed @CONTEXT='uri', the URL didn't change. But the problem is that this is a core component and we cannot make changes in it.

[Anmol_Bhardwaj]

You can always overlay the component and make changes, just keep the OOTB component as the sling:resourceType for your component, and make only the required changes.

This will keep all the existing properties as it is.

And just to make sure that this issue exists in vanilla, try the same in a vanilla AEM instance, and then you can raise a product bug.

Whenever it gets fixed, you can just delete the customization from your component and it will effectively be same as OOTB.

[PVRPrasad]

I want to modify the style string by appending a query parameter to the image path. Do you have any example for that to achieve?