ionic 图片加载异常处理

最新推荐文章于 2024-11-19 10:59:18 发布

原创最新推荐文章于 2024-11-19 10:59:18 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #ng-src #angularjs #img

岁月会计云——前端开发专栏收录该内容

73 篇文章

订阅专栏

本文介绍了一种在App中处理图片加载失败的方法，通过AngularJS指令实现图片加载错误时自动替换为默认图片，确保用户体验不受影响。

app端的图片大部分从都是从后端传过来，app因为网络环境复杂，时而出现加载不全的情况，怎么解决呢，可以通过下面的指令。指定404异常的时候的默认图片，
而真实的图片注意要用ng-src。

/**
 * Created by dzm on 2016/4/21.
 * 图片失败的时候，加载的图片路径
 * 参考实例:
 *  <img ng-src="http://test/img/perry.png" dr-err-src="img/perry.png" />
 */
directives.directive('drErrSrc', function () {
    return {
        link: function(scope, element, attrs) {
            element.bind('error', function() {
                if (attrs.src != attrs.drErrSrc) {
                    attrs.$set('src', attrs.drErrSrc);
                }
            });
        }
    }
});