Question

Obective：如果没有可用的图像，则在锚标记上显示默认图像

onerror正在使用ng-src而不是

不工作

<li class=""><a href="http://imagepath/correct.jpg" id="hrefID"      onerror="this.src='http://imagepath/default.jpg'  "title="default image"</a>

但这不起作用

  <img alt="1" ng-   src="http://imagepath/correct.jpg" onerror="this.src='http://imagepath/default.jpg '"title="default image" />

Answer 1

Angular指令ngSrc没有任何本机功能来处理404响应。

所以你可以尝试这样：

<div ng-controller="MyCtrl">
    <div ng-repeat="image in images">
        <img ng-src="{{image}}" on-error="http://google.com/favicon.ico"/>
    </div>
</div>


<script>
var myApp = angular.module('myApp',[]);

myApp.directive('onError', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.onError) {
          attrs.$set('src', attrs.onError);
        }
      });
    }
  }
});

myApp.controller("MyCtrl", function($scope) {
    $scope.images = [
        'http://www.titanui.com/wp-content/uploads/2013/11/30/Flat-AngularJS-Logo-PSD.png',
        'any.png' //WRONG URL
    ];
});
</script>

Fiddle

onerror正在研究ng-src而不是锚标签

1 个答案: