Angular.js图像404未找​​到 [英] Angular.js image 404 Not Found

问题描述

我一个小问题。
我想显示从分类从我的REST API获取的图标。
要做到，我用休息的角度，给了我作为图标设计。
我的问题，是一个萤火虫警告：

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"

这是因为我的模板API响应之前laded。

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>

这是在我的控制器的片相应的code的

This is the piece of corresponding code in my controller

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

正如你所看到的，我尝试用NG-斗篷的工作，我也试图与NG-秀=类别，但没有更多的发挥。
我怎样才能避免这种情况和负载NG重复填充类变量，只有当？

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 ?

推荐答案

而不是

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

您应该使用NG-SRC：

you should use ng-src:

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

ngSrc文档：

采用了棱角分明的标记例如 {{哈希}} 的src属性不工作的权利：浏览器将会从URL抓取的文字文本{{}哈希} 直到角替换里面的前pression {{哈希}}。所述ngSrc指令解决了这个问题。

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.

这篇关于Angular.js图像404未找​​到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！