我们知道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. H5 - 在线编辑制作

    [百度H5商店]http://h5.baidu.com/store [木疙瘩在在线制作]http://www.mugeda.com/ [百度在线制作工具]http://h5.baidu.com/ [易 ...

  2. html中的js监听付款按钮--触发ajax调用php后台--得到的json数据---交给安卓原生处理

    //01 var pay_status = new Object();$(".sure_pay").on("touchstart",function(){ va ...

  3. 2、Spring的 IoC详解(第一个Spring程序)

    Spring是为了解决企业应用开发的复杂性而创建的一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架.在这句话中重点有两个,一个是IoC,另一个是AOP.今天我们讲第一个IoC. IoC概念 ...

  4. COCOA® PROGRAMMING FOR MAC® OS X (1)- Get Start

    这个是Mac OS App开发学习的第一篇,希望是一个好的开始. 一.为什么要学习Mac OS App开发 a)长时间做IOS开发,发现自己所做的局限在苹果的一些库上面,一些底层的API却是私有的,不 ...

  5. libmad编译

    patch -Np1 -i ../libmad-0.15.1b-fixes-1.patch && sed "s@AM_CONFIG_HEADER@AC_CONFIG_HEAD ...

  6. 广播与P2P通道(下) -- 方案实现

    在广播与P2P通道(上) -- 问题与方案 一文中,我们已经找到了最优的模型,即将广播与P2P通道相结合的方案,这样能使服务器的带宽消耗降到最低,最大节省服务器的宽带支出.当然,如果从零开始实现这种方 ...

  7. C# 语言规范_版本5.0 (第2章 词法结构)

    1. 词法结构 1.1 程序 C# 程序 (program) 由一个或多个源文件 (source file) 组成,源文件的正式名称是编译单元 (compilation unit)(第 9.1 节). ...

  8. JQ N级导航

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 安装 sublime package control

    import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_p ...

  10. 线程的实现方法以及区别 extends Thread、implements Runable

    /** 线程存在于进程当中,进程由系统创建. 创建新的执行线程有两种方法 注意:   线程复写run方法,然后用start()方法调用,其实就是调用的run()方法,只是如果直接启动run()方法, ...