角指令为备用图片

本文介绍了角指令为备用图片的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如果一个单独的服务器上的图像不存在，我想显示默认图像。是否有一个角指令来完成这项工作？

If an image on a separate server doesn't exist I'd like to display a default image. Is there an angular directive to accomplish this?

推荐答案

没有，但你可以创建一个。

No but you can create one.

HTML：

<img fallback-src="http://google.com/favicon.ico" ng-src="{{image}}"/>

JS：

myApp.directive('fallbackSrc', function () {
  var fallbackSrc = {
    link: function postLink(scope, iElement, iAttrs) {
      iElement.bind('error', function() {
        angular.element(this).attr("src", iAttrs.fallbackSrc);
      });
    }
   }
   return fallbackSrc;
});