billyJoe billyJoe - 10 months ago 44
AngularJS Question

Angular.js image 404 Not Found

i've a tiny problem.
I'd like to show icons from categories i get from my rest api.
To do, i use rest angular which gives me icons as designed.
My problem, is a firebug alert:

"NetworkError: 404 Not Found - http://localhost:8888/app/%7B%7Bc.icon%7D%7D"

This is because my template is laded before api response.

<ul class="col-md-9 inner">
<li ng-repeat="c in categories"><img src="{{c.icon}}" alt="{{}}" ng-cloak></li>

This is the piece of corresponding code in my controller

Category.getList().then(function(categories) {
$scope.categories = categories;

As you can see, i've try to work with ng-cloak, i've also tried to play with ng-show="categories" but nothing more.
How can i avoid this behavior and load ng-repeat only when categories variable is populated ?

Answer Source

instead of

<img src="{{c.icon}}" alt="{{}}" ng-cloak>

you should use ng-src:

<img ng-src="{{c.icon}}" alt="{{}}">

From ngSrc documentation:

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.