Dynamic URL for background-image truncated even though I used EncodeHtml()

I am loading an image from an entity that I want to display as background-image. This should be fairly simple, I load it and then use an action to build the URL as follows:

"background-image: url(" + EncodeHtml("data:image/png;base64," + BinaryToBase64.Base64) + "); background-repeat: repeat-x;"

But when I run my code the url is truncated to "data:image/png", the following is obtained from the Chrome inspector:

<div data-container="" style="height: 100px; background-image: url("data:image/png"); background-repeat: repeat-x;"></div>


What can I do please to be able to use the image from and entity as the background to a container (div) and I need to repeat it in x.

Solution

Hi Elize van der Riet,

I also observed the same as you did, Sorry I was not able to figure it out why it's happening so... but I found a work-around for this implementation


Steps to follow:

1) Introduce the OnAfterFetch event to the Aggregate from which you are getting the Background Image Binary Data

2) Within the Aggregate OnAfterFetch Event Action Flow introduce a JavaScript Nod

   Add Input Parameters to JS Node : DivElementId, Base64String

3) Add the below mentioned JS script

document.getElementById($parameters.ElementId).setAttribute(
   "style", "background-image: url('data:image/png;base64," + $parameters.base64String + "'); height: 800vh");


See this sample--BackgroundDiv 


Hope this helps you!


Regards,

Benjith Sam

Solution

Benjith Sam wrote:

Hi Elize van der Riet,

I also observed the same as you did, Sorry I was not able to figure it out why it's happening so... but I found a work-around for this implementation


Steps to follow:

1) Introduce the OnAfterFetch event to the Aggregate from which you are getting the Background Image Binary Data

2) Within the Aggregate OnAfterFetch Event Action Flow introduce a JavaScript Nod

   Add Input Parameters to JS Node : DivElementId, Base64String

3) Add the below mentioned JS script

document.getElementById($parameters.ElementId).setAttribute(
   "style", "background-image: url('data:image/png;base64," + $parameters.base64String + "'); height: 800vh");


See this sample--BackgroundDiv 


Hope this helps you!


Regards,

Benjith Sam

 

 Thank you Benjith, that work-around worked. We can both confirm then the the EncodeHtml() is not doing its work in this case. Must be an OutSystems bug of some sort then.

Elize van der Riet wrote:

 Thank you Benjith, that work-around worked. We can both confirm then the the EncodeHtml() is not doing its work in this case. Must be an OutSystems bug of some sort then.

You are welcome, Elize :)

I'm glad that the solution helped you!

Observation: In the Div/Container widget extended property, If you define the base64 value or the entire URL as a plain string i.e not using any Encode wrapper functions, still the url() - Base64 value part is getting truncated after the page gets rendered in the browser. 

Doing the same implementation using JS, it got working as expected, I'm not sure, whether to declare it as a bug or not... will wait for the experts to take a call on this :)


Regards,

Benjith Sam