ng-src and onerror : Occasionally hiding a valid image

Question

为了在图像不存在时显示默认图像（而不是损坏的图像），我使用了这段代码：

<img ng-show="order.img" ng-src="{{order.img | fPath}}" onerror="this.style.display='none';"/>
<img ng-hide="order.img" ng-src="{{'default.png' | imgPath}}" />

此处fPath、imgPath是为图片名称附加前缀的过滤器。

大多数情况下效果很好（图像得到渲染）。但是，在某些情况下，图像不会显示。在这种情况下，angular 片段被翻译成这个 html（注意第一个 img 标签中的 style="display: none;"）：

<img ng-show="order.img" ng-src="http://xx.s3.amazonaws.com/o/img1.jpg" onerror="this.style.display='none'" src="http://xx.s3.amazonaws.com/o/img1.jpg" style="display: none;">
<img ng-hide="order.img" ng-src="http://xx.s3.amazonaws.com/default.png" class="ng-hide" src="http://xx.s3.amazonaws.com/default.png" style="">

问题: 这可能是什么原因？以及可能的解决方法？ onerror 是否比预期更早触发？

PS: http://xx.s3.amazonaws.com/o/img1.jpg 是一个有效的图像路径并且可用。

更新：app/route/controller是这样定义的

路线

t_app.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    // ...
    $stateProvider.state('ref', {
        url: '/orders/:ref',
        templateUrl: 'views/order.htm',
        controller: 'orderController'
    });
    // ...
});

控制器

t_app.controller('orderController', ['$scope', '$stateParams', function($scope, $stateParams) {
      // Load the order (this step takes a while)
}]);

Answer 1

我想你的情况是这样的：http://plnkr.co/edit/8JL0Op?p=preview

angular.module('app.helper', [])
.controller('ImgController', ['$scope', '$timeout', function($scope, $timeout) {
  $scope.img = "";
  $timeout(function(){
    $scope.img = "9c5595db-db21-4783-902a-8e80b84ae22c/6b89ed2b-878a-4f76-95c4-76ee95f47d9a.jpg";
  }, 1500);
}]);
    filter.$inject = ["$filter"];
    angular.module('app.helper').filter('addPath', filter);

    function filter($filter) {
        function filterFn(input) {
            return "http://cdn.playbuzz.com/cdn/"+input;
        }

        return filterFn;
    }

过滤器在 order.img 设置之前添加了前缀，因此 img src 将只是（直到 order 被加载）前缀，没有图像名称，导致错误的 src。我想，但我不能 100% 确定，因为它有时只发生的原因是有时 $scope.order 在 onerror 触发器之前加载（可能是在结果被缓存时或其他什么的时候）和之后的一些时间。
混合原生 javascript 和 angular

时很难确定执行顺序

您可以通过在过滤器中添加一个检查来避免这种情况：如果传递给过滤器的值为空、未定义或空字符串，那么 return 在这种情况下为空。像这样

return typeof input === "undefined" || input === null || input === "" ? null : "http://cdn.playbuzz.com/cdn/"+input;

ng-src and onerror : Occasionally hiding a valid image

ng-src and onerror : Occasionally hiding a valid image

angularjs

angularjs-filter

onerror