I use AngularJS in my website and some images are loaded like this:
<img ng-cloak src="{{ person.username }}"/>
the problem is that I get 404 errors in console that the image is not found because before angular is laoded it tries to load image named {{ person.username }}
How do I solve this?
Use ng-src
Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
<img ng-cloak ng-src="{{ person.username }}"/>
You can simply use :
ng-src
Example :
<img ng-cloak ng-src="{{ person.username }}"/>
The problem is, that the browser tries to load the resource before the expression is evaluated by angular. That's why there are build in directives as ng-href or ng-src that should be used.
