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函数以使用angular的原生$index。如果这不正确，请随时改回来。

您的图片的alt标签并非严格来说是处理图片加载失败的情况的消息。虽然你的信息对屏幕阅读器有帮助，但它应该真正描述图像的意图，即Photograph of student's University，如果你想显示错误信息，建议使用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>

图像有时有时不会出现在棱镜中

1 个答案: