Image Path URL Encoding in Sightly

[Sayali1]

There is a container component developed having a image field to author a Background Image with sling:resourceType --> cq/gui/components/authoring/dialog/fileupload. When images with space in their name are drag and drop into the image field it is stored along with the spaces in the node. As the image properties are read in Sightly using properties.imagepath, the spaces in the image path is creating issue to display the image as background image. Is there a way to encode the URL of the image path in Sightly or to remove or replace the image path spaces in sightly (HTL). The image path stored in page is -- /content/dam/bhn/Flowers FTD Image.png .

[Saravanan_Dharmaraj]

@Sayali1 Please check the suggested solution here 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/encoding-url-in-sightly/m-...

[SivakumarKanoori · Accepted solution]

@Sayali1 : 

Using below Javascript function you can get the path for the image 

"encodeURI('/content/dam/bhn/Flowers%20FTD%20Image.png'); 

'/content/dam/bhn/Flowers%20FTD%20Image.png'

You can invoke this Javascript functionn from your sightly code.

Thanks 

Siva