AngularJS中如果ng-src 图片加载失败怎么办
2016-01-28 14:05
155 查看
我们知道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 (前瞻)
- 2014年度最强AngularJS资源合集
- Angular中$compile源码分析
- AngularJs自定义服务(二)
- Angular实现form自动布局
- Angular中$compile源码分析
- angularJs解决跨域问题-最简单的完美实例
- Angular $q 完全指南
- Angular-seed源码解释
- AngularJS系列:10、作用域
- angularjs ajax传参
- AngularJS 内置过滤器
- AngularJS系列:9、模块
- AngularJS系列:8、表单
- angular表单认证大全&angular表单控件
- angularJS指令以及用法
- angularJS中搜索框的用法
- 品(AngularJS深度剖析与最佳实践)一书的体会
- AngularJS系列:7、表达式
- AngularJS select详细用法