Angular JS：使用ng-switch並檢查文件是否存在

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}}" />