How to add path to a base64 encoded image

Question

I'm embedding an image in my emails so I encode it with an online tool.

Problem is that my email template uses a dynamic url, i.e. ${loginurl}/images, as the path to my image.

How do I append that dynamic path to my image? I tried below but the image still doesn't display in the email.

<img src="data:image/png;base64,${loginurl}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" />

Here is how the image is being displayed in my email:

enter image description here

When you supply a data url, it *doesn't have a path*. The fact that your email template **expects** a file path is the problem here. You won't fix this by playing with your `src` attribute. — spender, Sep 22 '14 at 16:09
I've removed the file path from my image and am now just using the data url; it still doesn't work but that may be because of the mime type of the email. — fumeng, Sep 22 '14 at 17:14
Support for Data URIs in email clients is spotty--see [this related answer](http://stackoverflow.com/a/9330720/361762). What client are you using? — Dave, Sep 22 '14 at 19:27

score 1 · Accepted Answer · edited Dec 09 '21 at 00:24

When using a data protocol with the image encoded in base64, it does not have a domain or URL or path.

For example, if you copy a data URL into Chrome, it will display the image directly without reaching out into the Internet to download it.

Try it:

 data:image/png;base64,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

If you want to create your own data URL image, there are plenty of free tools online.

Thank you for the explanation. I created a data URL image using the tool mentioned above. It still doesn't display in my email but copying and pasting the URL into the browser does display it. I think the missing piece may be to define my email as a multi part mime message. — fumeng, Sep 22 '14 at 17:13
That sounds right if you are seeing the HTML as plain text. View the original source of the received email to see how that image tag was received. Perhaps there is an encoding issue. — Scott, Sep 22 '14 at 17:51

How to add path to a base64 encoded image

1 Answers1