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, ie ${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:

Answer 1

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 like this one: http://dataurl.net/#dataurlmaker