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

最新推荐文章于 2025-09-13 00:44:26 发布

原创最新推荐文章于 2025-09-13 00:44:26 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #指令 #加载默认图片

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

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);
              }
            });
        }
    }
});