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.
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 Node
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
Benjith Sam 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.
Elize van der Riet wrote:
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 :)
@Benjith Sam I'm looking for this exactly. I have an image on an entity and want to have it as a screen background.
I'm looking at your JS Node:
However, I'm not sure what the inputs require:
DivElementId, Base64String
What am I supposed to feed these inputs? DivElementId, I suppose is the containers' name.
But what about the Base64String? Is it the Binary?
Thanks for your help!
Hi Luis,
Sorry for my late reply. Please find the below response.
What am I supposed to feed these inputs?
Refer to the attached .oml file
I hope this helps you!
Kind regards,
Hi Benjith,
Thank you so much for your answer, I was eventually able to figure it out and get it to work! :D
Keep up the good work.
Best Regards,
LuÃs Matos
You're welcome, LuÃs.
Glad to help you :)