handlebars won't render HTML image tag? (using NodeJS)

Question

I'm trying to render an HTML image tag with handlebars. The HTML does get passed to handlebars properly. (So does get passed to the webpage, but the image is not rendered.) How do I fix this?

In my .HBS file I have:

{{HTMLforImage}} {{image}} {{alt}}

and in my .js file I have:

  res.render('imageHub', {
  HTMLforImage: "<img src = ",
  image: "\"" + req.body.imageLink + "\"",
  alt: " alt = \"raccoon\">"
});

where imageHub is the page handlebars should render the HTML, but instead of a picture being posted I am just getting the HTML being passed onto the webpage. Any ideas on how to fix this would be really appreciated.

Answer 1

{{HTMLforImage}} will escape markup. Try triple brackets: {{{HTMLforImage}}}

Answer 2

Use triple braces to escape HTML special characters such as the < and > characters:

{{HTMLforImage}} {{image}} {{alt}}

Also you have <image ... but it should be <img ...

The best practice would be to change your handlebars content to:

<img src="{{imageLink}}" alt="{{alt}}" />

and pass only the required data like this:

res.render('imageHub', {
  imageLink: req.body.imageLink,
  alt: 'raccoon'
})