使用 angularjs 指令为图像创建嵌套的后备 src

Question

在我的标签中，如果 src returns a 404 那么我可以使用指令显示后备图像，但是如果这个后备图像也是 returns 404，我如何使用指令显示另一个图像

Answer 1

您可以像这样创建 angular 指令 -

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

Answer 2

创建一个指令来检查一系列错误图像并一个接一个地提供它们。

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

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

然后为fallbacksrc写一个指令，为error事件绑定标签。使用 split 函数将图像替换为数组。然后，您可以从 link 函数内的这个数组中进行选择。

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

这是一个示例代码。在此示例中，我在范围本身中使用了一组错误图像，但没有在标签内提供它们。

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 中引用的图像。但那是无效的。因此，它会尝试从数组中加载图像。

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

使用 angularjs 指令为图像创建嵌套的后备 src

Create a nested fallback src for an Image using angularjs directive

angularjs

angularjs-directive

src

fallback