我们知道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 图片加载失败怎么办的更多相关文章

  1. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  2. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

  3. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  4. <img> 标签 图片加载失败时候处理方案

    应用场景 在开发中,经常遇到一种情况,数据库不存在图片地址,或者存在图片地址,但图片已经被删除,这个时候会出现加载失败情况.提供以下解决方案 解决方案 在 img 标签 加上onerror=" ...

  5. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  6. WebForm、MVC图片加载失败处理

    还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...

  7. JavaScript-onerror事件:图片加载失败后不显示

    HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...

  8. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  9. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

随机推荐

  1. HDU 5857 Median

    因为原序列是排列好了的,那么只要看一下给出的两个区间相交的情况,然后分类讨论一下,O(1)输出. #pragma comment(linker, "/STACK:1024000000,102 ...

  2. 《JS权威指南学习总结--6.1原型》

    内容要点: 一.每一个JS对象(null除外)都和另一个对象相关联."另一个"对象就是我们熟知的原型,每一个对象都从原型继承属性. 二.所有通过对象直接量创建的对象都具有同一个原型 ...

  3. hdu_5879_Cure(打表)

    题目链接:hdu_5879_Cure 题意: 给你一个n,让你计算1/k2的和,k从1到n. 题解: 因为只保留5位小数,所以打个100W的表,比这个数大的直接输出最后一位就行了 #include&l ...

  4. HTTP Status 400 - Required request part 'file' is not present

    今天使用Spring MVC做一个文件上传的功能,在提交表单的时候出现了如下错误:

  5. Dot Product

    These are vectors: They can be multiplied using the "Dot Product" (also see Cross Product) ...

  6. 高精度运算专题3-乘法运算(The multiplication operation)

    这个专题呢,我就来讲讲高精度的乘法,下面是三个计算乘法的函数,第一个函数是char类型的,要对字符串进行数字转换,而第二个是两个int类型的数组,不用转换成数字,第三个则更为优化,用a数组-b数组放回 ...

  7. SharePoint 2013 图文开发系列之列表定义高级篇

    转载自  http://www.cnblogs.com/jianyus/p/3484714.html SharePoint列表库,是我们使用过程中最常用的库,下面,我们简单介绍下代码定义自定义列表,主 ...

  8. weblogic一些基本概念

    <收藏过来的----------http://www.cnblogs.com/cocowool/archive/2012/04/01/2428861.html> WebLogic中的一些基 ...

  9. B - 小Y上学记——小Y的玩偶

    B - 小Y上学记——小Y的玩偶 Time Limit: 2000/1000MS (Java/Others)    Memory Limit: 128000/64000KB (Java/Others) ...

  10. JavaScript(6)——事件1.0

    ---恢复内容开始--- 事件 好不容易回到正轨,好好学习,天天向上.今天写的是事件,感觉内容蛮多的,所以分了两篇写,主要写了事件流.事件处理程序.事件对象.恩,明天还会再有一篇,哈哈哈.我努力的!我 ...