图片有时来有时不在 angularJs

Question

我是 angular 的新手，只是遇到了一个问题，我无法弄清楚为什么图像不显示，有时显示有时不显示。我也检查了控制台，没有错误。

<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 标签严格来说并不是处理图片加载失败情况的消息。尽管您的消息对屏幕 reader 有帮助，但它应该真正描述图像的意图，即 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>

图片有时来有时不在 angularJs

Images sometimes come sometimes not in angularJs

javascript

image

repeat

angularjs