Upload Local Image in HTML Node

[Asuwini_P]

Hi All,

Describe the problem/error/question

I need to fetch an image file stored locally(self hosted linux - docker) and then display it using an HTML <img> tag.

What is the error message (if any)?

Couldn’t retrieve the image in HTML format.

Please share your workflow

Information on your n8n setup

• n8n version: Version 0.225.2
• Database (default: SQLite): -
• n8n EXECUTIONS_PROCESS setting (default: own, main): own
• Running n8n via (Docker, npm, n8n cloud, desktop app): : docker
• Operating system: Ubuntu 22.04.2 LTS

[Asuwini_P]

Got the answer:

<img src="data:image/png;base64,{{ $('Read Binary Files').item.binary.data.data }}" alt="Embedded Image">

Thank you

[Asuwini_P]

How can we manage the large encoded data?

I’ve constructed an HTML template, but including the image has resulted in excessively long encoded data. Consequently, I’m unable to send the HTML template via email.

<img src='data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAfQAAAH0CAYAAADL1t+KAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAPHRFWHRDb21tZW50AHhyOmQ6REFGLTZ5VWFuT3c6MjAsajozMjY3NzgyNTU5ODYzMjY5NjgwLHQ6MjQwMzA4MTIXw6QgAAAE5GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAA.......>

Is it possible to short the encoded data?

[Asuwini_P]

Any solution on the above problem?

[bartv]

I’d take a look at the original image:

• What are the dimensions? Can it be scaled down for your use?
• Does it need to be a PNG? PNG files are typically a lot larger than JPGs.

You can use the Edit Image node to do three operations:

• Scale down the image to something acceptable.
• Convert the file to a JPG
• Tweak the JPG quality (a lower number results in a smaller file, but compression artifacts might become visible below some values).

[Asuwini_P]

Hi @bartv,

I have tried to reduce the image size and converted into jpg format, but stilll the image binary data is huge, due to that I couldn’t send an email via AWS SES.

Any other way to fetch the image from the server?

[Asuwini_P]

Hi @bartv ,

Is there a specific size limit enforced by AWS SES for emails? I’m attempting to send an email with a template that exceeds 9.94 KB in size, but it fails to send. However, when the HTML template size is less than 9.94 KB, I’m able to successfully send emails using the AWS SES node.

[bartv]

@Asuwini_P

I have tried to reduce the image size and converted into jpg format, but stilll the image binary data is huge, due to that I couldn’t send an email via AWS SES.

Any other way to fetch the image from the server?

In theory you could do that with a webhook, but this may not be an optimal solution if you plan to send a lot of emails. For personal/small-scale use this should be fine though.

@Asuwini_P

Is there a specific size limit enforced by AWS SES for emails? I’m attempting to send an email with a template that exceeds 9.94 KB in size, but it fails to send. However, when the HTML template size is less than 9.94 KB, I’m able to successfully send emails using the AWS SES node.

I’m not aware of such a limitation, sorry.

[Asuwini_P]

Hi @bartv ,

@bartv

In theory you could do that with a webhook, but this may not be an optimal solution if you plan to send a lot of emails. For personal/small-scale use this should be fine though.

With the help of webhook, how can I achieve this?

[Asuwini_P]

I’m facing a significant obstacle in my project regarding the transmission of images via email using SMTP. The images originate from two sources:

1. Local (Self hosted server).
2. Retrieval through an HTTP API.

Regardless of the source, I need to send these images via email. This challenge is currently impeding progress on my project.

[bartv]

@Asuwini_P

With the help of webhook, how can I achieve this?

Something like this will work. How many emails do you need to send?

[Asuwini_P]

Hi @bartv

I will send nearly 50–100 emails per day

[bartv]

Gotcha. The webhook should be able to handle that. Still, a more robust solution would be to upload the image to a webserver.

[Asuwini_P]

Hi @bartv,

Thank you for your prompt response.

I’ve explored the solutions you proposed, but I’m facing a challenge with sending binary data of images via email. The images I’m working with are stored locally or accessible via HTTP, but ultimately In the end, it’s been sent as binary data in the email.

Is there a way to embed these images directly into the HTML-formatted email, similar to how we specify image locations in HTML?

For instance:

<img src="image.png">

Could we specify the image location on the server within the HTML code?

<img src="/home/node/.n8n/image.png">

Do we need to change docker level configuration to fetch those images?

[bartv]

@Asuwini_P

Could we specify the image location on the server within the HTML code?

<img src="/home/node/.n8n/image.png">

Not without a webserver. The user who receives the email will not have access to your local filesystem and needs to have a public URL to fetch the image from.

Using the webhook example I gave above, you could put the webhook’s address into the email template like this:

<img src="http://public.n8n-webhook-address" />

This way, once the recipient opens their email, their email client will do a web request to your n8n instance, it’ll generate the image and return it for display.

Hope that makes sense!

[Asuwini_P]

Got your solution, Thanks @bartv

[bartv]

Awesome! Don’t you just love those monkeys?

[Asuwini_P]

Hi @bartv

Why my image not changing in email ? Any idea? I am updating my graph with different data points. But I could see only the previous image in my email.

Workflow -

Received in Email -

[bartv]

Did you try different email clients? It might be that it’s caching the image since it has the same URL every time you send it. To bypass the cache, you can add a ‘cache buster’ to the image URL that’s different each time you send the email, for example by appending

?time={{ DateTime.now().toSeconds() }}

[Asuwini_P]

@bartv now I can view updated graph image. Thank you!

But the problem is while loading the images(13kb size) in email, automatically webhook triggered again and receiving another email. How can we avoid these things?