我们知道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 5829 Rikka with Subset

    快速数论变换ntt. 早上才刚刚接触了一下FFT,然后就开始撸这题了,所以要详细地记录一下. 看了这篇巨巨的博客才慢慢领会的:http://blog.csdn.net/cqu_hyx/article/ ...

  2. hashmap冲突的解决方法以及原理分析:

    在Java编程语言中,最基本的结构就是两种,一种是数组,一种是模拟指针(引用),所有的数据结构都可以用这两个基本结构构造,HashMap也一样.当程序试图将多个 key-value 放入 HashMa ...

  3. JS代码备忘

    function $(v) { if (typeof v === 'function') { window.onload = v; } else if (typeof v === 'string') ...

  4. 2016年团体程序设计天梯赛-决赛 L1-7. 到底是不是太胖了(10)

    据说一个人的标准体重应该是其身高(单位:厘米)减去100.再乘以0.9所得到的公斤数.真实体重与标准体重误差在10%以内都是完美身材(即 |真实体重-标准体重| < 标准体重x10%).已知市斤 ...

  5. ubuntu通过tnvm安装Nodejs

    第一步,先安装tvm tnvm(Taobao Node Version Manager)淘宝Node版本管理器 安装: 直接输入 wget -O- https://raw.githubusercont ...

  6. 关于cocos2dx的C++调用创建项目

    我使用的是cocos2dx-2.1.4版本+cygwin,其实主要是为了配合公司项目,所以用了低版本的cocos2dx 假设已经配置环境成功: 按照对应的要求输入包名,项目名,以及TargetId,就 ...

  7. 《高性能Javascript》读书笔记-3

    第三章 DOM编程 把dom和js 各自想象为一个岛,他们之间用收费的桥梁链接,每次访问dom都必须途径这座桥收取过路费,访问次数多费用就高了.所有必须减少来往次数. innerHtml 与dom比较 ...

  8. 自定义MVC框架(二) -基于XML文件

    1.oracle的脚本 create table STUDENT ( sid NUMBER primary key, sname ), age NUMBER, pwd ) ) create seque ...

  9. Unity5系列资源管理AssetBundle——打包

    资源管理是游戏开发的重要环节,Unity中使用AssetBundle可以非常方便地帮我们打包和更新游戏内容,在5系列中,AssetBundle更是方便好用,现在让我们先进行打包吧. 刚说了,5系列打包 ...

  10. Python之生产者&、消费者模型

    多线程中的生产者和消费者模型: 生产者和消费者可以用多线程实现,它们通过Queue队列进行通信. import time,random import Queue,threading q = Queue ...