原理就是给img绑定error事件，替换原有的src地址。

首先在data中创建一个defaultImg（随便起的），里面的值是该默认图片的地址；

在html页面的img标签上绑定该属性

这样默认图片就设置好了；

这样做的好处就是可以提高用户体验，而图片的alt属性，是在图片显示失败后出现的文字，像下图所示，但是这样的用户体验不高；

像后台管理系统中，如果是这样或者是有一个默认封面的话，会感觉很舒服；

vue当图片加载失败时，用一个默认图片替换；的更多相关文章

  1. 当图片加载失败时更换图片， Firefox onerror 报错

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

  2. vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  3. vue，onerror实现当图片加载失败时使用默认图

    1. 2.

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

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

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

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

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

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

  7. AngularJS中如果ng-src 图片加载失败怎么办

    我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...

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

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

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

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

随机推荐

  1. WPF音乐电台

    最近一两年都没写过wpf相关的项目了,本来就不太熟的一些技巧全忘光啦,为了重新拾起这点东西,就花了几天时间做了个小demo,大致功能就是读取豆瓣电台api,获取歌单列表听歌.最开始是参考网上现有的例子 ...

  2. sqlserver 2008 无法使用特殊主体‘sa’，错误15405

    今天莫名其妙的遇到一个问题,还原了几个数据库到新的服务器上,突然发现sa用户对某几个数据库没有权限(用户映射): 我手工勾选相应数据库的db_owner权限之后,报错:无法使用特殊主体'sa',错误1 ...

  3. 通过sysbench工具实现MySQL数据库的性能测试

    1.背景 sysbench是一款压力测试工具,可以测试系统的硬件性能,也可以用来对数据库进行基准测试.sysbench 支持的测试有CPU运算性能测试.内存分配及传输速度测试.磁盘IO性能测试.POS ...

  4. spring applicationContext.xml文件移到resources目录下

    SpringMVC的框架默认目录结构 修改后的目录结构及web.xml 同时在pom里的配置:将resources目录打包到web-inf/classes目录下<resources>   ...

  5. Spring Boot 面试的十个问题

    用下面这些常见的面试问题为下一次 Spring Boot 面试做准备. 在本文中,我们将讨论 Spring boot 中最常见的10个面试问题.现在,在就业市场上,这些问题有点棘手,而且趋势日益严重. ...

  6. 滚动视图、列表视图[ListView、SimpleAdapter类]

    滚动视图 <ScrollView android: layout_width="fill_parent" android: layout_height="fill_ ...

  7. Angular JS 中的服务注册方法

    在Angular JS中创建服务的几种方法 factory() service() constant() value() provider() factory(name,fn(){}) 该服务为单例的 ...

  8. MyBatis在Spring环境下的事务管理

    MyBatis的设计思想很简单,可以看做是对JDBC的一次封装,并提供强大的动态SQL映射功能.但是由于它本身也有一些缓存.事务管理等功能,所以实际使用中还是会碰到一些问题--另外,最近接触了JFin ...

  9. 8天入门docker系列 —— 第八天 让程序跑在swarm集群上

    真正的落地部署都是希望程序跑在集群下,而不是单机版下测测玩玩,所以这篇就来聊一下怎么使用docker swarm进行部署,因为是swarm是docker自带的, 所以部署起来还是非常简单的. 一:前置 ...

  10. go 学习之路（二）

    一.文件名 关键字 标识符 所有go源码都以.go结尾 标识符以字母或下划线开头,大小写敏感 a.boy b.Boy c.a+b d.0boy e._boy f.=_boy g._ 以上变量c.d.f ...