때로는 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 구문으로 전환하고 데이터를 컨트롤러에 바인딩하는 것이 좋습니다. 이 here

모델을 읽을 수 있습니다

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

템플릿 : 나는 BTW 린다 자습서를 다음입니다

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