Last Updated: February 25, 2016
·
1.789K
· neotamizhan

The case of the missing image: ngSrc for rescue

I recently ventured into angularjs. The webpage has img tag with src value provided by angular. The tag looked like this :

<img src="{{episode.image}}" alt="...">

The webapp worked perfectly, except for one tiny issue. When the app started, this error was displayed in the browser console.

GET http://localhost:8000/%7B%7Bepisode.image%7D%7D 404 (File not found)

Browser was literally looking for the image named {{episode.image}}.

A quick look through Angularjs Documentation gave the solution. Replacing the regular src attribute with ng-src solves this issue.

<img ng-src="{{episode.image}}" alt="...">

Might be a trivial thing. But was frustrating, until I could get that error message off my console.

ps: This is my first coderwall post. Is this too trivial to be posted here?