Angular.js image 404 Not Found

Question

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="{{c.name}}" ng-cloak></li>
</ul>

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 1

instead of

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

you should use ng-src:

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

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.