有時圖像有時不在angularJs

Question

我是新來的角，只是卡住了一個問題，我無法弄清楚爲什麼圖像不顯示，有時它來了，但有時它不是。我也檢查控制檯，沒有錯誤。

<div class="main"> 
     <ul> 
      <li class="two" ng-repeat="items in student | filter : query | orderBy: studentOrder : direction"> 
      <!--we use ng-src because when we run the file the angular.min.js file reads the html fot image so we get an error in console --> 
      <a class="link" href="#/details/{{student.indexOf(items)}}"> 
      <img class="image" ng-src="images/{{items.image}}.JPG" alt="Photo is not availble"> 

      <p class="four">{{items.name | uppercase}} 
       </br> 
      </p> 
      <p class="five"> 
       {{items.univeristy | lowercase}} 
      </p> 
      </a> 
      <hr> 

      </li> 

     </ul> 

     </div> 

Answer 1

問題是，你的引用大寫JPG每次。這聽起來像一些圖像有JPG意味着他們將工作。但更多的時候，圖像是各種人的命名習慣的混合體。請檢查所有圖像路徑是否正確。

-

請注意，有幾種方法可以改進您的代碼。首先，我冒昧地假設你的學生反對。

請在將來提供這個，因爲它會導致更準確的答案

我已經改變了你的範圍變量名是一個小更具有可讀性。

ng-repeat="student in students"應該更具可讀性[singular] in [plural]。這意味着，當您引用每個屬性時，您可以得到student.name，這使得一目瞭然更加合理。

我也設置了indexOf函數來使用角度的本地$index。如果這不正確，請隨時更換。

您的圖片的alt標記不是嚴格的消息來處理圖片加載失敗的情況。雖然你的信息對屏幕閱讀器有幫助，但它應該真實地描述圖像的意圖，即Photograph of student's University，如果你想顯示eror消息，建議使用ng-if語句。

我也建議切換到controllerAs語法並將您的數據綁定到控制器。您可以在此here

模型讀了起來：

$scope.students = [{ 
    name: 'joe', 
    university: 'someuni', 
    image: 'image-name' 
}]; 

模板：

<div class="main"> 
    <ul> 
    <li class="two" ng-repeat="student in students"> 
     <a class="link" href="#/details/{{$index}}"> 
     <!-- I would usually have the absolute url so taht any changes I need to make can be done in ctrl/srvc --> 
     <img class="image" ng-src="{{student.image}}" alt="Photo is not availble" width="120"> 

     <p class="four">{{student.name | uppercase}}</br></p> 
     <p class="five">{{student.univeristy | lowercase}} </p> 
     </a> 
     <hr> 
    </li> 
    </ul> 
</div>