Question

<li ng-repeat="appliance in appliances | limitTo:2">
  <div class="icon">
    <img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
  </div>
  <div class="label">{{ appliance.Label }}</div>
</li>

在AngularJS中，我可以在控制台中看到它试图加载'/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'。现在我的ng-repeat效果很好。如果我在decodeURIComponent中，我看到上面的％7B和％7D分别是'{'和'}'。如何防止发生此错误？

Answer 1

Use ng-src此处为src

 <img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

在src属性中使用像{{hash}}这样的Angular标记并不起作用右：浏览器将使用文字文本从URL中获取 {{hash}}直到Angular替换{{hash}}中的表达式。该 ngSrc指令解决了这个问题。

写它的错误方法：

<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>

写它的正确方法：

<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\

有关详细信息，请参阅此链接https://docs.angularjs.org/api/ng/directive/ngSrc

Answer 2

你必须使用ng-src，如果你使用src，浏览器会尝试在加载角度之前加载图像，这就是ng-src存在的原因。

<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

AngularJS无法正确解析花括号

2 个答案: