原理就是给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. C语言入门4-运算符和表达式

    一.     分类 C语言一共有34种运算符,10种运算类型,本节我们要掌握的有( 7 种) 算术运算符(+.-.*./.%). 关系运算符(>.>=.==.!=.<.<=). ...

  2. 关于Redis的几件小事 | 高并发和高可用

    如果你用redis缓存技术的话,肯定要考虑如何用redis来加多台机器,保证redis是高并发的,还有就是如何让Redis保证自己不是挂掉以后就直接死掉了. redis高并发:主从架构,一主多从,一般 ...

  3. 蓝牙Beacon广播数据包格式以及解析

    目录 1. 获取原始蓝牙广播包 2. 安装WireShark软件 3. 分析Beacon广播包数据 3.1 第一个数据包格式 3.2 第二个数据包格式 3.3 Android程序开发中的蓝牙广播包 4 ...

  4. Apache Httpd 启用重定向 rewrite

    1.启用模块 由:#LoadModule rewrite_module modules/mod_rewrite.so 更改为:LoadModule rewrite_module modules/mod ...

  5. Linux设备驱动程序学习----1.设备驱动程序简介

    设备驱动程序简介 更多内容请参考Linux设备驱动程序学习----目录 1. 简介   Linux系统的优点是,系统内部实现细节对所有人都是公开的.Linux内核由大量复杂的代码组成,设备驱动程序可以 ...

  6. manjaro配置记录

    一.换源 官方镜像源(包括 core, extra, community, multilib ) sudo pacman-mirrors -i -c China -m rank //更新镜像排名 su ...

  7. [POJ2559&POJ3494] Largest Rectangle in a Histogram&Largest Submatrix of All 1’s 「单调栈」

    Largest Rectangle in a Histogram http://poj.org/problem?id=2559 题意:给出若干宽度相同的矩形的高度(条形统计图),求最大子矩形面积 解题 ...

  8. JSP使用分层实现业务处理

    在Java开发中,使用JDBC操作数据库的四个步骤如下:   ①加载数据库驱动程序(Class.forName("数据库驱动类");)   ②连接数据库(Connection co ...

  9. spring读取xml配置文件（二）

    一.当spring解析完配置文件名的占位符后,就开始refresh容器 @Override public void refresh() throws BeansException, IllegalSt ...

  10. kubernetes CRD 开发指南

    扩展kubernetes两个最常用最需要掌握的东西:自定义资源CRD 和 adminsion webhook, 本文教你如何十分钟掌握CRD开发. kubernetes允许用户自定义自己的资源对象,就 ...