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的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...
随机推荐
- 2016年团体程序设计天梯赛-决赛 L2-3. 互评成绩(25)
学生互评作业的简单规则是这样定的:每个人的作业会被k个同学评审,得到k个成绩.系统需要去掉一个最高分和一个最低分,将剩下的分数取平均,就得到这个学生的最后成绩.本题就要求你编写这个互评系统的算分模块. ...
- ManyToMany OrderBy
有A.B表和A_B中间表,A_B中间表只有A.B表的id,想让A中的bs以date列排序: @Entity @Table(name="A") public class A impl ...
- C#数组和元组
声明数组 int[] myArray; 初始化数组 myArray = new int[4]; 数组是引用类型当初始化完毕后,将在托管堆上分配内存空间,其结构图如下
- js函数的一些技巧
1 函数的引用可以直接通过函数名来调用 bind: function (fn, scope) { return function () { return fn.apply(scope, argumen ...
- js for...in 语句
原文链接:http://www.w3school.com.cn/js/js_loop_for_in.asp for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作). 实例 ...
- POJ 1789 Truck History(Prim+邻接矩阵)
( ̄▽ ̄)" #include<iostream> #include<cstdio> #include<cstring> #include<algo ...
- Java 反射 Class类
Java 反射 Class类 @author ixenos 摘要:Class类在反射中的地位.构造Class对象的三种方式.Class对象构造对应类型对象的三种方式 Class类在反射中的地位 位于j ...
- C语言实现用户输入
用户输入一个字符串然后回车表示结束.因为用户在输入的过程中长度是不确定的,所以要求自己使用的循环写的更好.在这里自己写了一个代码,效率不高,相对来说如果能模拟出C++中的vector向量可能会好一些. ...
- 把嵌入在eclipse中的tomcat日志分离出来
现象 不知道从哪个版本的tomcat开始,windows版本的tomcat不再包含{tomcat_home}\logs\catalina.out这个文件,eclipse中配置好tomcat服务器之后, ...
- Hihocoder 2月29日
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期). 只有闰年有2月29日,满足以下一个条件的年份为闰年 ...