Base64 image in email

Back to Forums

Daniel Prasetya Nugroho

Solved

Question

Hi All,

any idea how to put base64 image to email?

I'm trying to create an email signature using ckeditor, and this will be included at the bottom of email.

Thanks

11 Aug 2017

Daniel Prasetya Nugroho

Solution

Eduardo Jauch wrote:

Hi Dan,

In theory, you could include it directly in the page of the email using HTML (with an expression with escape no):

<img alt="" src="data:image/png;base64,...

But in the past, most email clients didn't had support for it. I don't know if they are better now.

As an alternative, you could save the image to database, using the conversion function to change it to binary and than simply use a image widget.

If the image is "static", will not change, you can include as resource or deploy to target directory.

Hope this helps,

Cheers

Eduardo Jauch

Hi Eduardo,

Thanks for the reply.

I have tried your solution earlier, and I found that most of the email client doesn't support inline 64base image.

https://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email

For anyone that get the same issue, finally I found a solution.

It's based on this post: https://www.outsystems.com/forums/discussion/21270/retrieving-image-url-from-blob-in-database/

basically, you will need to create an API that will return the image binary. and then put the API URL as image's src .

Thanks,
Dan

See solution in context

14 Aug 2017

Eduardo Jauch

Hi Dan,

In theory, you could include it directly in the page of the email using HTML (with an expression with escape no):

<img alt="" src="data:image/png;base64,...

But in the past, most email clients didn't had support for it. I don't know if they are better now.

As an alternative, you could save the image to database, using the conversion function to change it to binary and than simply use a image widget.

If the image is "static", will not change, you can include as resource or deploy to target directory.

Hope this helps,

Cheers

Eduardo Jauch

11 Aug 2017

1 reply

14 Aug 2017

Show thread

Hide thread

Daniel Prasetya Nugroho

Solution

Eduardo Jauch wrote:

Hi Dan,

In theory, you could include it directly in the page of the email using HTML (with an expression with escape no):

<img alt="" src="data:image/png;base64,...

But in the past, most email clients didn't had support for it. I don't know if they are better now.

As an alternative, you could save the image to database, using the conversion function to change it to binary and than simply use a image widget.

If the image is "static", will not change, you can include as resource or deploy to target directory.

Hope this helps,

Cheers

Eduardo Jauch

Hi Eduardo,

Thanks for the reply.

I have tried your solution earlier, and I found that most of the email client doesn't support inline 64base image.

https://stackoverflow.com/questions/16242489/send-a-base64-image-in-html-email

For anyone that get the same issue, finally I found a solution.

It's based on this post: https://www.outsystems.com/forums/discussion/21270/retrieving-image-url-from-blob-in-database/

basically, you will need to create an API that will return the image binary. and then put the API URL as image's src .

Thanks,
Dan

14 Aug 2017

Eduardo Jauch

Nice to hear you found a solution.

But it seems that you are doing a lot of unnecessary work...

I'm just curious, did you tried my suggestion to the Image Widget?
We use it in our mails and it works without problem in any mail client (that I know of).

And you can use an image from the database...

Cheers,
Eduardo Jauch

14 Aug 2017

Daniel Prasetya Nugroho

Hi Eduardo,

Do you mean to use outsystems's image (at the left toolbox)?

The image widget doesn't really suitable for my case, because I have to use CKEditor to create the email signature.

The user creates their own signature, they could place the image wherever they want. That's why a fixed email layout with an image in it does not really work for this case.

Thanks again for the input.

Thanks,
Dan

14 Aug 2017

Eduardo Jauch

Oh, ok :)

In this case probably this is the best solution.
But I am intrigued if it is possible to do this without requiring an API.

I'll take a look. If I find a way, I'll put here, as a resource to others :)

Cheers,
Eduardo Jauch

14 Aug 2017

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines