Question

在我的标签中，如果src返回404，那么我可以使用指令显示回退图像，但如果此回退图像也返回404，我该如何使用指令显示另一个图像

Answer 1

创建一个指令以浏览一系列错误图像并一个接一个地提供它们。

您可以在代码中提供替代图片网址。

<img fallbacksrc="http://url1/error.jpg,http://url2/error.jpg" src="http://url0.image.jpg">

然后为fallbacksrc编写指令并绑定error事件的标记。使用split函数将替代图像添加到数组中。然后，您可以在link函数中选择此数组。

您要查找的信息是，只要error失败， src事件就会发生任意次。因此，如果您在指令中设置的所有图像都连续失败，则没有限制。

以下是示例代码。我在本示例中使用了作用域本身的错误图像数组，而没有在标记内部提供它们。

function MyCtrl($scope) { $scope.image = "http://greentreesarborcareinc.com/wp-content/uploads/2014/01/image-placeholder.jpg1" $scope.errorImageIdx = 0; $scope.errorImages = ["http://spanning.com/assets/uploads/images/11954453151817762013molumen_red_square_error_warning_icon.svg_.med_.png", "http://fivera.net/wp-content/uploads/2014/03/error_z0my4n.png"] } myApp.directive('fallbacksrc', function() { return { link: function(scope, ele) { ele.bind('error', function() { if (scope.errorImageIdx <= scope.errorImages.length - 1) { angular.element(this).attr("src", scope.errorImages[scope.errorImageIdx]); scope.errorImageIdx++; } }); } } });

此处标记将尝试显示$scope.image中引用的图像。但那是无效的。因此，它尝试从数组中加载图像。

尝试将数组的第一个元素设置为无效的。在这种情况下，它会自动选择第二张图像。

Answer 2

您可以像这样创建角度指令 -

app.directive('onError', function() {
      return {
        restrict:'A',
        link: function(scope, element, attr) {
          element.on('error', function() {
            element.attr('src', attr.onError);
          })
        }
      }
    });

并使用喜欢 -

<img class="pic" on-error="default-image.jpg" ng-src="{{author.profileImageUrl}}">

使用angularjs指令为Image创建嵌套的fallback src

2 个答案: