我们知道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. hdu1021

    #include <stdio.h> int fib(int m){ int n_2=1,n_1=2,n,i; if(m==0)return 1; if(m==1)return 2; fo ...

  2. L3-007. 天梯地图

    L3-007. 天梯地图 题目链接:https://www.patest.cn/contests/gplt/L3-007 Dijstra 这题是Dijstra的变形,麻烦的是两种最短路的相同距离时的选 ...

  3. DPDK l2fwd 浅注

    l2fwd是DPDK中的非常经典的例子.二层转发模型. 就是在相邻的网卡接口间互相传递报文. 网口0和网口1之间报文互传. 网口2和网口3之间报文互传. ............ 运行参数 . 在目录 ...

  4. 第六十四节,html文档布局元素

    html文档布局元素 学习要点:     1.文档元素总汇     2.文档元素解析     本章主要探讨HTML5中文档元素,文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快.让整个布局元 ...

  5. Spring的Bean之Bean的基本概念[转]

    从前面我们知道Spring其实就是一个大型的工厂,而Spring容器中的Bean就是该工厂的产品.对于Spring容器能够生产那些产品,则取决于配置文件中配置. 对于我们而言,我们使用Spring框架 ...

  6. POJ 2209 The King#贪心

    (- ̄▽ ̄)-*  水 //水题:潜力^e为正数(e为2时都可以)的儿子都可以去上战场了, //英文要看懂,exponent指数,不超过3的正数 #include<iostream> #i ...

  7. IOS CrackMe 破解学习

    一直在看别人如何破解一个app,下面自己也尝试着学习怎么去破解一个app的密码,下面是完整的过程. 准备工作: 一台mac或者pc安装了ssh客户端 一台越狱的iphone iphone上安装了ope ...

  8. 2015 ACM/ICPC Asia Regional Shanghai Online

    1001 Puzzled Elena 1002 Antonidas 1003 Typewriter 1004 Count the Grid 1005 Code Formatting 1006 Ther ...

  9. 写一个CGI程序并运行

    准备Linux和Apache我在/var/www/cgi-bin/下建一个文件get.c #include <stdio.h> #include <stdlib.h> int ...

  10. 终端中出现While executing gem ... (Errno::EPERM) Operation not permitted - /usr/bin/pod错误的修改方法

    把输入终端的sudo gem install cocoapods改为 sudo gem install -n /usr/local/bin/ cocoapods即可