angularjs 图片加载失败时,加载默认图片

最新推荐文章于 2024-09-16 07:32:17 发布

loadSuccess

最新推荐文章于 2024-09-16 07:32:17 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： angularjs 指令加载默认图片

本文链接：https://blog.youkuaiyun.com/loadSuccess/article/details/76144922

本文介绍了一个自定义 AngularJS 指令 'errSrc' 的实现方式，该指令用于处理图片加载失败的情况，通过设定默认的备用图片路径来确保页面显示的连贯性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

app.directive('errSrc', function () {
    return {
        link: function (scope, element, attrs) {
            element.bind('error', function () { //请求图片数据失败,加载err-src
                if (attrs.src != attrs.errSrc) {
                    alert('errsrc')
                    attrs.$set('src', attrs.errSrc);
                }
            });
            attrs.$observe('ngSrc', function(value) { //ng-src值为null,加载err-src
              if (!value && attrs.errSrc) {
                attrs.$set('src', attrs.errSrc);
              }
            });
        }
    }
});