時々、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が得られることを意味します。

角度のネイティブ$indexを使用するようにindexOf関数を設定しました。これが間違っている場合は、元に戻してください。

画像のaltタグは、画像の読み込みに失敗した場合を処理するためのメッセージではありません。あなたのメッセージはスクリーンリーダーに役立ちますが、実際にイメージが意図されているもの、つまりPhotograph of student's Universityを記述する必要があります。エラーメッセージを表示するには、ng-ifステートメントを使用することをお勧めします。

controllerAs構文に切り替えて、データをコントローラにバインドすることもお勧めします。

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

テンプレート：あなたはこのhere

モデル上に読むことができます

<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>