原理就是给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语言入门9-2-模块大致一览

    字母数字 判断字符是否为英文字母isalpha()判断字符是否为数字isdigit()判断字符是否为英文字母或数字isalnum()判断字符是否为小写字母islower()判断字符是否为大写字母isu ...

  2. Java中注释的使用

    Java 中注释有三种类型:单行注释.多行注释.文档注释 我们可以通过 javadoc 命令从文档注释(/**aa*/)中提取内容,生成程序的 API 帮助文档. 打开首页,查看下生成的 API 文档 ...

  3. 数据库---T-SQL语句（一）

    一.T-SQL语句 1.创建表:create table Name(Code varchar(50),) 主键:primary key 自增长:auto_increment 外键关系:referenc ...

  4. asn1学习笔记

    INTEGER 类型 1.由于这个类型在解码器中没有针对取值范围进行定义.所以在定义的时候要指定取值范围.如: errorcode::=ERRORCODE (1..12345678) ErrorCod ...

  5. 手工sql注入（重点）

    sql 子查询:() select goods_name from goods where goods_id=(select max(goods_id) from goods): 联合查询:selec ...

  6. Atlassian In Action-Jira之二次开发（五）

    到现在已经写到了第五章节,实际上离Jira的官方系统已经越来越远,本章节的内容基本上已经完全脱离了Jira这个系统本身,而是依赖Jira的API接口和数据库进行开发了.主要包含如下几个功能: 人员任务 ...

  7. element 上传组件 el-upload 的经验总结

    前言 最近在做后台管理项目,采用的 vue-element-admin ,上传图片是一个很常用的功能,也遇到了很多问题,刚好趁此机会做一些总结. 初步总结下会提到的问题,目录如下: el-upload ...

  8. 努力做一个优秀的programmer [ C# 影院售票系统]

    Cinema.cs类 [Serializable] // 电影院类 public class Cinema { public Cinema() { //二进制 SoldTickets = new Li ...

  9. PageHelper分页实战（SSM整合）

    步骤一:引入SSM相关的jar包,包列表如下: 步骤二:创建或修改配置文件,配置文件清单如下: applicationContext.xml <?xml version="1.0&qu ...

  10. JS实现在线ps功能

    功能介绍 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体 ...