I have touched it briefly for css-fonts. bit similar, I guess.

are sprites not easier and will achieve relatively the same performance?

Hey Joop,

In theory you can just use it with a normal Image Widget where the URL is your data URI. (And the URL is an expression so you can use images as Resources of the eSpace directly and just convert it to Base64).
Note: just thinking out about it, didn't actually test anything.

But my question would be if it actually improves the performance.
Browsers/servers/cdn's already handle cache pretty well so in theory it only affects the first request.
Considering the overall size increases 33%, more processing time and that the data URI standard only says the browsers must handle data up to 1kb (even that most browsers support more) .. I have my doubts.

If pages have many images, then I would attempt sprites way before attempting to do it with data URI's.

Regards,
João Rosado

I have an image stored in a binary field that uses the data URI sheme. (The image is a digital signature capture from a mouse or finger swipe on mobile devices).
The image below is an exmaple of the signature capture. It works really well, and fast.

My issue is that why I try to send an email with the image, the email fails with error " Error creating Email. Unable to fetch..... (then displays the URI value)  " .

The response from Outsystems was the following:

The problem in your case is that the signatures have images using the data URL scheme which is not supported by our email renderer.
 What kind of data is kept the binary data of your signatures? If it is always an image, you can use the image widget pointing to a database image which should not give you problems when generating the email.

I have tried to use the image widget with external source, but it does not display the image.
The URL field has the value "BinaryDataToText(GetTblSignaturesByRecordId.List.Current.BinaryItems.BinaryValue,Encoding:)" which ias what I use for a webscreen expression (with escape content = No) and it works fine.

Any ideas?

Hi Robbie,

Like I said it was in teory. Would need to look at the generated html to see why it didn't work.
Anyway for your problem, just use like Support sugested a Image Widget with type "Database". The image will be converted and placed inline (with "cid:" urls) by the email renderer.


Regards,
João Rosado

Hi Joao,

Please see below for an example of the data stored in the binary field. When converted to text, the html belowis extracted.

The issue s that the image widget (when using "External" as Type, will only work when you strip away the initial part:
<img class="signature-response" src=

If you manually create an expression with "data:image/png;base64,iVBORw0KGgoAAA" the string is changed, with "../../../data:image/png;base64,iVBORw0KGgoAAA..." which does not display the correct image. Using the Inspect Element in Chrome, you can manually edit the HTML and remove the "../../../" and the image displays correctly.

I have now tried to insert the string into an xml structure, stripping away the HTML tags, and then using the Type = Database route.

Will see how that goes...

Robbie



<img class="signature-response" src='data:image/png;base64,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' />

Can anyone from Outsystems help with this one. I need to have it sorted as soon as possible,.

How to display a data URI scheme for an image in an email (currently is not supported by Outsystems Agile Platform email renderer)

Robbie