AngularJS无法正确解析大括号

AngularJS not parsing curly braces properly

本文关键字：AngularJS      更新时间：2023-09-26

<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重复工作得很好。如果我解码URIComponent，我看到上面的%7B和%7D分别是"{"和"}"。如何防止此错误发生？

>在这里Use ng-src而不是src 

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

在 src 属性中使用像 {{hash}} 这样的角度标记不起作用 right：浏览器将使用文字文本从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

你必须使用 ng-src ，如果你使用 src，

浏览器会尝试在加载 angular 之前加载图像，这就是 ng-src 存在的原因。

<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
相关文章：