20
Views
3
Comments
Solved
Dynamic URL for background-image truncated even though I used EncodeHtml()
Question

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.

mvp_badge
MVP
Rank: #91
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