EmberJS Bind-Attr – Making a simple Img tag src work as expected

In ember’s handlebar templates you’ll find that it’s not a simple matter of injecting the src attribute of your template with a value.

If you are anything like me – you will try something like this:

<img src="{{{this/screenshot_url}}}"/>

or something like this

<img src="{{this/screenshot_url}}"/>

expecting to see something like this in the source code

<img  src="http://.../image.jpg"/>

and instead seeing something like this

<img src="&lt;script id='metamorph-11-start' type='text/x-placeholder'&gt;&lt;/script&gt;http://sims-real.com/uploads/posts/2011-05/1306593777_peggyhat1.jpg&lt;script id='metamorph-11-end' type='text/x-placeholder'&gt;&lt;/script&gt;">

What you’ll need to do in emberjs is use the bind-attr faculty

<img {{bind-attr src="screenshot_url"}}/>

to get the output that you expect

<img  src="http://.../image.jpg"/>