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

  • A+
所属分类: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);
        }
      });
    }
  }
});

 

ZPY

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: