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

来源:互联网 发布:手机测光表软件 编辑:程序博客网 时间:2024/05/18 00:32

当图片加载失败或者不存在的时候,我们需要一张提示图片来代替他。用判断就太麻烦了,img有自己的方法onerror , 当找不到图片的时候就会执行onerror里面的代码


例如:

<img src="1.jpg" onerror="2.jpg"/>


当1.jpg找不到的时候,会自动加载2.jpg. 

那如果2.jpg也找不到怎么办?就会一直执行onerror里面的代码,陷入死循环。

所以,我们可以这么写,代码如下:

<img src="1.jpg" alt="" onerror="nofind(this)">

JS代码:


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



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



那么,在ionic开发中,angularjs里怎么使用呢?angualrjs 代码如下:


<img ng-src="1.jpg" 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);        }      });    }  }});

如果需要执行其他的程序写在element.bind('error',function(){} 这个方法里面就可以。具体操作可以输出scope,element,attrs查看里面的属性和方法进行操作,不懂得可以评论留言给我。


希望可以帮助到大家,谁有更好的方法,可以评论给我


0 0