prevent angular template from being evaluated by browser

Question

I have a src attribute of and img element which is being filled with an angular template, like this:

<img src="img/data/{{row.image}}" />

And whenever I browse the page I get the following 404 error from the browser:

GET http://localhost:8080/img/data/%7B%7Brow.image%7D%7D 404 (Not Found)

Is there some way to prevent the browser from trying to fetch the image until the template is resolved?

Answer 1

Use ng-src

<img ng-src="img/data/{{row.image}}" />