1

所以我写了一个简单的指令，它拦截图像的 404 并在第一个图像加载失败时回退到另一个图像。

效果很好，但我遇到了一些返回 404 状态代码但仍返回正文中的图像（例如 Google+）的 URL 的问题。

如果你想看看代码示例在这里https://jsfiddle.net/4cjb5srh/1/

angular.module('test', [])
.directive('imgMissing', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            element.bind('error', function() {
                console.log('image missing');
            });
        }
    }
}]);

在此示例中，Google+ 图片不会触发错误，但linkedin 图片会触发。我尝试使用 jquery .error() 而不是 jqlite bind('error') 但没有解决问题。

编辑：JimTheDev 指出，如果 ngSrc 路径解析为 404，这可能是同一个问题，有没有办法回退到默认值？. 我的问题和其他问题都将退回到 404，但是这个问题特定于返回 404但未触发错误的情况（当响应类型由 kwan245 如下所述指定时）。

4

1 回答 1

0

如果响应以图像作为响应类型来满足，则看起来 404 被忽略。

不幸的是，因为这是使用浏览器本机 img src，我认为我们无法在 javascript 中拦截。

另一种方法是 $http 我们自己并删除 img src

angular.module('test', [])
.directive('imgMissing', function($http) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {

    $http.jsonp(attrs.srcurl +"?callback=JSON_CALLBACK").success(function(res){
       element.src('data:image/jpeg;base64,' + res.data);
    }).error(function (res) {
       console.log("failed");
    });

    }
}});

在 html 中：

示例：http: //jsfiddle.net/4cjb5srh/2/

于 2015-05-19T03:28:19.150 回答