AngularJS中如果ng-src 图片加载失败怎么办
我们知道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 图片加载失败怎么办的更多相关文章
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- <img> 标签 图片加载失败时候处理方案
应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- WebForm、MVC图片加载失败处理
还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...
- JavaScript-onerror事件:图片加载失败后不显示
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...
- js img图片加载失败,重新加载+断网检查
我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...
- 伪元素黑魔法:一个替代onerror解决图片加载失败的方案
问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
随机推荐
- java default使用
我们都知道在Java语言的接口中只能定义方法名,而不能包含方法的具体实现代码.接口中定义的方法必须在接口的非抽象子类中实现.下面就是关于接口的一个例子: public interface Simple ...
- json解析的函数eval_r() 和 JSON.parse()
eval_r()解析的字符串格式是'({"data":"hello","num":"5"})' ...
- ESFramework 4.0 快速上手(01) -- Rapid引擎
(在阅读该文之前,请先阅读 ESFramework 4.0 概述 ,会对本文的理解更有帮助.) ESFramework/ESPlatform 4.0 的终极目标是为百万级的用户同时在线提供支持,因为强 ...
- Python多进程multiprocessing使用示例
mutilprocess简介 像线程一样管理进程,这个是mutilprocess的核心,他与threading很是相像,对多核CPU的利用率会比threading好的多. import multipr ...
- Openjudge-计算概论(A)-计算书费
描述: 下面是一个图书的单价表:计算概论 28.9 元/本数据结构与算法 32.7 元/本数字逻辑 45.6元/本C++程序设计教程 78 元/本人工智能 35 元/本计算机体系结构 86.2 元/本 ...
- UILabel 的属性设置
.设置字体样式(加粗) label.font = [UIFont boldSystemFontOfSize:30]; 6.设置字体类型 label.font = [UIFont fontWithNam ...
- Latex 中插入图片no bounding box 解决方案
在windows下,用latex插入格式为jpg,png等图片会出现no bounding box 的编译错误,此时有两个解决办法: 1.将图片转换为eps格式的图片 \usepackage{grap ...
- zabbix3.2在lamp环境安装
zabbix官网下载zabbix-3.2.1.tar.gz wget http://jaist.dl.sourceforge.net/project/zabbix/ZABBIX%20Latest%20 ...
- 完美版cookie设置/得到/删除2016/423
function setCookie(key, value, t) { var oDate = new Date(); oDate.setDate( oDate.getDate() + t ); do ...
- shape的使用
android在布局边缘位置处理圆角的两个办法: 1),一个是直接让美工切一张带有圆角的图片. 2),使用shape来解决. 第一种不在赘述,主要讲一下第二中方法来实现. 上边缘出现圆角,下边缘正常的 ...