Handlebars templating and dynamic images

Question

In my templates I am doing something like

<img class="someClass" src="{{imgURL}}">

The images are loaded correctly but I get warnings like:

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

Is there a way to fix this?

Answer 1

You have two problems:

1. You're missing a closing quote in your <img> but that's not a big deal.
2. Your template is being stored in a hidden <div> or similar element that contains HTML.

If you say this:

<div id="t" style="display: none">
    <img class="someClass" src="{{imgURL}}">
</div>

the browser will interpret the <img> as a real image and try to load the resource specified in the src attribute, that's where your 404:

GET http://localhost:8888/%7B%imgURL%7D%7D 404 (Not Found)

comes from. Templates are rarely valid and properly formed HTML so you need to keep the browser from trying to interpret template as HTML. The usual approach is to store the template in a <script> with a non-HTML type:

<script id="t" type="text/x-handlebars-template">
    <img class="someClass" src="{{imgURL}}">
</script>

Then you can say Handlebars.compile($('#t').html()) to get your compiled template and the browser won't try to interpret the #t content as HTML.