0

我的 AngulaJS 驱动的前端从本地JSON文件中获取数据，稍后将切换到 API。数据是Project具有嵌套对象列表的对象列表Image。我在循环中显示这些数据：

<div id="projects" ng-app="portfolio">
    <div id="projectsList" ng-controller="ProjectsListController as projectsList">
        <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects">
            <div class="project-image">
                <img
                    ng-src="{{projectItem._embedded.images[0].src}}"
                    title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                    alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                />
            </div>
        </div>
    </div>
</div>

但有时图像src无效（错误404）。最好跳过images[0]无法找到第一张图像 ( ) 的此类项目。如何让脚本跳过不相关的对象？

编辑

我已经得到了三个答案，但解决方案不起作用，我想准确地解释这个问题：

图像的src属性总是设置的。这不是问题。这意味着，检查它是否已设置（如ng-show="projectItem._embedded.images[0].src != ''"or ng-if="{{projectItem._embedded.images[0].src}}"）将不起作用- 不起作用。

它不起作用——src属性已设置。这是错误的（将导致404错误），但它已设置并且projectItem._embedded.images[0].src != ''也会返回true“不相关”对象。

在此处输入图像描述

在此处输入图像描述

4

4 回答 4

2

这是使这项工作的一种hacky方式：

为了避免在它们引发404错误或图像无效时加载图像，

这必须在您的控制器内部。此函数检查图像 URL 是否有效/无效。

$scope.imageExists = function(image, object, index) {
    var img = new Image();
    img.onload = function() {
      object[index] = true;
      $scope.$apply();
    }; 
    img.onerror = function() {
      return false;
    };
    img.src = image;
 };

现在在视图中：

我正在启动一个img={};在ng-repeat.

然后将该索引的值初始化为ng-repeat函数$scope.imageExists。在该函数内部，在该图像加载成功时，正在设置img[index]= true.

<div ng-repeat="image in images" ng-init="img = {}">
   <img ng-src="{{image}}" ng-init="img[$index] = imageExists(image, img, $index)" ng-show="img[$index]">
</div>

演示

因此将其应用于您的代码：

<div id="projects" ng-app="portfolio">
    <div id="projectsList" ng-controller="ProjectsListController as projectsList">
        <div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects"  ng-init="img = {}">
            <div class="project-image" ng-init="img[$index] = imageExists(projectItem._embedded.images[0].src, img, $index)" ng-show="img[$index]">
                <img
                    ng-src="{{projectItem._embedded.images[0].src}}"
                    title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                    alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                />
            </div>
        </div>
    </div>
</div>

将$scope.imageExists上面的代码放置到您的控制器中。

于 2015-04-04T11:49:35.250 回答
1

您可以使用ng-if 

<div class="projectItem" ng-repeat="projectItem in projectsList.projectsListData._embedded.projects" ng-if="{{projectItem._embedded.images[0].src}}">
            <div class="project-image">
                <img
                    ng-src="{{projectItem._embedded.images[0].src}}"
                    title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                    alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                />
            </div>
        </div>
    </div>

或者你也可以使用 ng-show/ng-hide，它只是不显示元素，但会出现在 DOM 中。

但是在使用 ng-if 时要小心，因为它会创建自己的范围。

编辑：如果 url 已经设置，那么一种方法是使用这种方法（或类似的方法）测试 url 是否存在JavaScript/jQuery 检查损坏的链接，并且
ng-if="UrlExists(projectItem._embedded.images[0].src)"

于 2015-04-04T11:23:12.787 回答
0 
        <div class="project-image" ng-if="projectItem._embedded.images[0].src != ''">
            <img
                ng-src="{{projectItem._embedded.images[0].src}}"
                title="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
                alt="{{projectItem.title}} - {{projectItem._embedded.images[0].title}}"
            />
        </div>
于 2015-04-04T11:26:02.167 回答
0

您可以创建自己的图像指令：

<my-image src="http://someimageurl"></my-image>

如果图像存在，该指令会将图像插入 DOM。如果没有，那么您可以忽略它，或插入一条消息。

var app = angular.module('app', []);
app.directive('myImage', function() {
  return {
    restrict: 'E',
    replace:true,
    link: function(scope, element, attr) {
      var image = new Image();
      image.onload = function() {
         element.append(image);
      }
      image.onerror = function() {
         element.html('Something went wrong or the image does not exist...');
      }
      image.src = attr.src;
    }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <my-image src="https://www.google.ca/images/srpr/logo11w.png" />
  
  <my-image src="https://server/images/doesnotexist.png" />
</div>

于 2015-04-04T12:11:13.567 回答