ionic开发中图片加载失败或不存在时显示特定图片的解决方法

当图片加载失败或者不存在的时候，我们需要一张提示图片来代替他。之前我用*ngIf来判断，结果google后发现这样实在太麻烦了，img有自己的方法onerror , 当找不到图片的时候就会执行onerror里面的代码

例如：

<img src="1.jpg" alt="ionic开发中图片加载失败或不存在时显示特定图片的解决方法" onerror="2.jpg"/>

当1.jpg找不到的时候，会自动加载2.jpg. 
那如果2.jpg也找不到怎么办？就会一直执行onerror里面的代码，陷入死循环。

所以，我们可以这么写，代码如下：

<img src="1.jpg" alt="ionic开发中图片加载失败或不存在时显示特定图片的解决方法" alt="" onerror="nofind(this)">

function nofind(obj){
       obj.src = '2.jpg';
       obj.onerror = null;
}

当图片加载失败的时候，如果我们还有其他需求，都可以写在这个nofind()方法里了

但实际上，当图片不存在时，我们通常会指定一张工程里的图片，所以不存在死循环的问题。相对路径的写法如下：

<img src="{{service.ctxPath+d.img_path.split(',')[0]}}" onerror="this.src='assets/imgs/no_img.png'">

那么，在ionic开发中，angularjs里怎么使用呢？angualrjs 代码如下：

<img ng-src="1.jpg" alt="ionic开发中图片加载失败或不存在时显示特定图片的解决方法" err-src="2.jpg"/>

JS代码如下：

var app = angular.module("MyApp", []);
app.directive(‘errSrc‘, function() {
return {
    link: function(scope, element, attrs) {
      element.bind(‘error‘, function() {
        if (attrs.src != attrs.errSrc) {
          attrs.$set(‘src‘, attrs.errSrc);
        }
      });
    }
  }
});