Question

我正在循环浏览一系列事物，如果一个东西有图像我想要显示它。

但是如果一件东西没有图像，我想显示默认文字：

<div ng-repeat="myThing in myThings>
  <div ng-switch on="{{myThing.img}}" >
    <span ng-switch-when="{{myThing.img}}">
      <img src="/img/myThings/{{myThing.id}}" />
    </span>
    <span ng-switch-default>No Image</span>
  </div>
</div>

这样可以显示默认文本。

然而，浏览器也在尝试获取不存在的图像时抛出错误：

http://localhost:9000/img/myThings/%7B%7BmyThing.id%7D%7D 404 (Not Found)

有没有办法格式化这个ng-switch函数，以便不抛出这个错误？

Answer 1

使用ng-src代替src，这来自doc：

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

<img ng-src="/img/myThings/{{myThing.id}}" />

Angular JS：使用ng-switch并检查文件是否存在

1 个答案: