E-mail doesn't display base64 image using handlebars.js

Question

Guys I am stuck in displaying a base64 image in a HTML e-mail using handlebars.js.

    //imageURL : data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw==
    <img id="img" class="someClass" src="{{imageURL}}" >

I don't know how to display a image using handlebars. Kindly help me to move further.

The imageURL is base64 text? Because then you can use `src="data:image/png;base64, {{imageURL}}"` — Ron Nabuurs, Apr 20 '18 at 09:31
No that's not simple text ,imageurl contain full base64 string — tamilmani, Apr 20 '18 at 09:35
If you hard-code the imageURL in the img tag, does it show? Also, what is the outputted HTML? (right-click + inspect element) — Joseph Reeve, Apr 20 '18 at 09:40
If you use it with `{{imageURL}}` what does it show in the browser dev tools (F12)? — Ron Nabuurs, Apr 20 '18 at 09:43
am sending a image to mail as a html template using handlebar so i can't use dev tools — tamilmani, Apr 20 '18 at 09:50

gerard · Answer 1 · 2018-04-23T07:22:01.547

Your template is already correct. If you want an example using your template see the following code:

var source = document.getElementById("template").innerHTML;
var template = Handlebars.compile(source);
var context = {
  imageURL: "data:image/gif;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACwAAAAADwAPAAACIISPeQHsrZ5ModrLlN48CXF8m2iQ3YmmKqVlRtW4MLwWACH+H09wdGltaXplZCBieSBVbGVhZCBTbWFydFNhdmVyIQAAOw=="
};
var html = template(context);

document.getElementById("template").innerHTML = html;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<div id="template">
  <img id="img" class="someClass" src="{{imageURL}}" >
</div>

Update: The author didn't specify that the template was used in a e-mail. As said in the comments it is possible that the e-mail client doesn't support base64 images. For a more detailed answer about this, check the answer at http://stackoverflow.com/a/9330720/2540618.

when its send to mail as a html template it does not work,actually am trying to send a image to mail as a html template using handlebar — tamilmani, Apr 20 '18 at 09:52
Some e-mail clients wont support this. See the following answer on a different question on StackOverflow which e-mail clients support Image URI's: https://stackoverflow.com/a/9330720/2540618 — gerard, Apr 20 '18 at 13:23

score 1 · Answer 2 · edited Nov 14 '21 at 21:29

1

You need to use SafeString from Handlebars like this:

import { SafeString } from 'handlebars'

const imageURL = new SafeString('data:image/png;base64,R0lGODlhDwAPAKECAAAAzMzM/////wAAACw...')

// In your template
<img id="img" class="someClass" src="{{imageURL}}" >

edited Nov 14 '21 at 21:29

Dharman

30,962
25
85
135

answered Nov 14 '21 at 21:23

Miguel Carbajal

311
3
4

E-mail doesn't display base64 image using handlebars.js

2 Answers2