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是为图片名称附加前缀的过滤器。

大部分时间它运作良好（图像被渲染）。但是，在某些情况下，图像不会显示。在这种情况下，角度代码段会转换为此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将是（直到订单为lodaded）前缀，没有图像名称，导致错误的src。我认为，但我无法100％确定，原因是因为它有时只发生在某个时间$scope.order被加载之前（可能是结果被缓存或其他什么时）的错误触发器以及之后的某些时间。
混合原生javascript和angular

时，很难确定执行顺序

您可以通过在过滤器中添加一个检查来避免这种情况：如果传递给过滤器的值为null，undefined或空字符串，则在这种情况下返回null。像这样的东西

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

ng-src和onerror：偶尔隐藏有效图像

1 个答案: