您的位置:首页 > Web前端 > AngularJS

AngularJS中如果ng-src 图片加载失败处理方法

2017-12-04 10:55 260 查看
我们知道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);
}
});
}
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: