我们知道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. TESTNG重试、截屏、监听

    http://qa.blog.163.com/blog/static/19014700220138585422735/

  2. hancher57公众号突破3000人

  3. 设计新Xlator扩展GlusterFS[转]

    原文:http://www.linuxidc.com/Linux/2013-08/89105.htm 1. GlusterFS概述 GlusterFS是一个开源的分布式文件系统,具有强大的Scale- ...

  4. Union、Union All、Except、InterSect的区别

    UNION: 将多个「结果集 (result set)」的「行 (row)」合并,作为单个结果集返回,并移除重复的行.若有重复的行,只留下一个. UNION ALL: 将多个「结果集 (result ...

  5. PHP中使用CURL(四)

    为了安全,我们的web服务主机往往不能上网.维护的时候,也是通过跳板机,ssh登录后去操作.有时候我们的程序需要访问外网.比如需要调用外网其他程序的某个接口.这时可以通过PHP的CURL函数的CURL ...

  6. debian root 可以远程登陆

    vim /etc/ssh/sshd_config FROM: PermitRootLogin without-password TO: PermitRootLogin yes

  7. js转义

    $('select[name="conditions[\'examQuestion.examTypeId_int\'].value"]');JS中使用 \' 作为 ' 转义

  8. Openjudge-计算概论(A)-大象喝水

    描述 一只大象口渴了,要喝20升水才能解渴,但现在只有一个深h厘米,底面半径为r厘米的小圆桶(h和r都是整数).问大象至少要喝多少桶水才会解渴. 输入输入有一行:包行两个整数,以一个空格分开,分别表示 ...

  9. 21.编写一个Java应用程序,该程序包括3个类:Monkey类、People类和主类 E。要求: (1) Monkey类中有个构造方法:Monkey (String s),并且有个public void speak() 方法,在speak方法中输出“咿咿呀呀......”的信息。 (2)People类是Monkey类的子类,在People类中重写方法speak(),在speak方法 中输出“小样

    //Monkey类 package d922; public class Monkey { Monkey() { } Monkey (String s) { System.out.println(s) ...

  10. 请教下关于CKEditor富文本编辑框设置字体颜色的问题

    CKEDITOR.editorConfig = function( config ){ config.plugins = 'about,a11yhelp,basicstyles,bidi,blockq ...