Pen Templates and Dynamic Images

Question

In my templates I am doing something like

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

Images load correctly, but I get warnings like:

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

Is there any way to fix this?

Answer 1

You have two problems:

• You are missing the final quote in <img> , but this is not very important.
• Your template is 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 interprets <img> as a real image and tries to load the resource specified in the src attribute, where is your 404:

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

. Templates are rarely valid and properly formed HTML, so you need to ensure that the browser does not try to interpret the template as HTML. The usual approach is to save the template in <script> using a non-HTML type :

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

You can then say Handlebars.compile($('#t').html()) to get a compiled template, and the browser will not try to interpret the contents of #t as HTML.

Answer 2

I know it's late, but here's how to do what you want:

 var view = Ember.View.create({templateName: 'myTemplate', myPicture: 'http://url_of_my_picture.png'}); view.appendTo('#myDiv'); <script type="text/x-handlebars" data-template-name="myTemplate"> <img {{bindAttr src="myPicture"}}> </script> 

Answer 3

I found that using triple brackets would work fine.

 <img src="{{{your source}}}" alt={{{your alt}}} />