首页 > Web开发 > 详细

AngularJS中如果ng-src 图片加载失败怎么办

时间:2015-05-25 23:54:57      阅读:20058      评论:0      收藏:0      [点我收藏+]

标签:class   使用   src   si   java   it   html   问题   la   

我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如:

<img ng-src="{{currentUrl}}"/>

 

其中currentUrl为图片地址,如果图片正常能显示,那这么使用一点问题没有,但是,如果图片加载失败了(例如该图片已经不存在,从而出现404错误),在该放图片的地方就会出现一个难看的图片加载失败图标,如果想把这个图标换成你自定义的图片,可以如下这么做: 
HTML:

<img ng-src="{{currentUrl}}" err-src="img/404.jpg"/>

 

Javascript:

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

 

 

这样一来,就把错误图标换成了你自己指定的”img/404.jpg

AngularJS中如果ng-src 图片加载失败怎么办

标签:class   使用   src   si   java   it   html   问题   la   

原文:http://www.cnblogs.com/GoodPingGe/p/4529265.html

(5)
(6)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号