Bilder manchmal kommen manchmal nicht in eckigJs

Question

Ich bin neu zu kantig und nur in einem Problem stecken, ich kann nicht herausfinden, warum das Bild nicht zeigt, irgendwann kommt es, aber manchmal ist es nicht. Ich überprüfe auch die Konsole, es gibt keinen Fehler.

<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

Das Problem ist, dass Ihre Großschreibung JPG jedes Mal referenziert. Es klingt wie einige Bilder haben JPG was bedeutet, dass sie funktionieren werden. Aber meistens sind Bilder eine Mischung aus verschiedenen Namenskonventionen. Bitte überprüfen Sie, ob alle Bildpfade korrekt sind.

-

Auf einer Seite beachten, gibt es ein paar Möglichkeiten, wie Sie Ihren Code verbessern könnte. Erstens habe ich mir die Freiheit genommen, anzunehmen, dass Ihre Schüler etwas dagegen haben.

Bitte geben Sie diese in Zukunft, da es zu einem genaueren Antworten

Ich habe Ihren Umfang Variablennamen geändert führen wird ein wenig mehr lesbar zu sein.

ng-repeat="student in students" sollte besser lesbar sein [singular] in [plural]. Dies bedeutet, dass Sie beim Verweisen auf jede Eigenschaft erhalten, was auf einen Blick viel sinnvoller ist.

Ich habe auch Ihre indexOf Funktion auf Winkel native $index verwenden. Wenn das nicht stimmt, kannst du es gerne wieder ändern.

Das alt-Tag Ihres Bildes ist nicht unbedingt eine Meldung, um Fälle zu behandeln, in denen das Laden des Images fehlgeschlagen ist. Obwohl Ihre Nachricht dem Bildschirmleser helfen würde, sollte sie wirklich beschreiben, was das Bild sein soll, d. H. Photograph of student's University. Wenn Sie die Fehlermeldungen anzeigen möchten, ist es ratsam, ng-if-Anweisungen zu verwenden.

Ich würde auch empfehlen, zu controllerAs Syntax zu wechseln und binden Sie Ihre Daten an den Controller. Sie können bis zu diesem here

Modell lesen:

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

Vorlage:

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