AngularJS: Images failing to load (Not Found) with curly brackets in URL

This is one of those schoolboy errors that, in hindsight, is blindingly obvious and I should have been able to work out for myself, but required a bit of searching before I managed to ask Google (other search providers are available) the right question.

Basically, I had a load of image src paths that were defined using AngularJS expressions, e.g.

<img src="content/images/results/{{result.id}}.jpg" />

The images loaded fine, but I kept getting 404 (Not Found) errors on image URLs that contained the curly brackets of my expressions (/content/images/results/%7B%7Bresult.id%7D%7D.jpg). This seemed like it was because the page was trying to load the images before Angular has done it’s work and converted the expressions into sensible URLs. And that’s exactly the problem!

The solution is a simple one: use ng-src instead of src if the URL has an expression in it, e.g.

<img ng-src="content/images/results/{{result.id}}.jpg" />