Angular.js图像404未找到

Question

我有一个小问题。 我想从我的休息api中显示来自类别的图标。 要做，我使用休息角度，它给我设计的图标。 我的问题，是一个萤火虫警报：

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

这是因为我的模板在api响应之前已经开始了。

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

这是我的控制器中的相应代码

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

正如你所看到的，我尝试使用ng-cloak，我也尝试使用ng-show =“categories”，但仅此而已。 如何在填充类别变量时避免此行为并加载ng-repeat？

Answer 1

而不是

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

你应该使用ng-src：

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

来自ngSrc documentation：

  

在src属性中使用 {{hash}} 等Angular标记无法正常工作：浏览器将使用文字文本{{hash}} 直到Angular替换{{hash}}中的表达式。 ngSrc指令解决了这个问题。