vue当图片加载失败时,用一个默认图片替换;
原理就是给img绑定error
事件,替换原有的src
地址。
首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址;
在html页面的img标签上绑定该属性
这样默认图片就设置好了;
这样做的好处就是可以提高用户体验,而图片的alt属性,是在图片显示失败后出现的文字,像下图所示,但是这样的用户体验不高;
像后台管理系统中,如果是这样或者是有一个默认封面的话,会感觉很舒服;
vue当图片加载失败时,用一个默认图片替换;的更多相关文章
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- vue,onerror实现当图片加载失败时使用默认图
1. 2.
- WebForm、MVC图片加载失败处理
还是那个该死的WebFrom项目,部分功能替换为MVC后感觉好多了,但是WebForm.MVC都有图片加载失败时显示提示图片的需求,并且统一在js中处理.问题来了,js中图片路径怎么处理呢?现场有可能 ...
- js 图片加载失败处理方法
在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...
- 当h5页面图片加载失败后,给定一个默认图
本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...
- AngularJS中如果ng-src 图片加载失败怎么办
我们知道AngularJS加载图片的方法是用技术分享加ng-src标签,例如: <img ng-src="{{currentUrl}}"/> 其中currentUrl为 ...
- JavaScript-onerror事件:图片加载失败后不显示
HTML: <img src="http://www.mazey.net/images/upload/image/20170518/1495122198180663.gif" ...
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
随机推荐
- C语言入门9-2-模块大致一览
字母数字 判断字符是否为英文字母isalpha()判断字符是否为数字isdigit()判断字符是否为英文字母或数字isalnum()判断字符是否为小写字母islower()判断字符是否为大写字母isu ...
- Java中注释的使用
Java 中注释有三种类型:单行注释.多行注释.文档注释 我们可以通过 javadoc 命令从文档注释(/**aa*/)中提取内容,生成程序的 API 帮助文档. 打开首页,查看下生成的 API 文档 ...
- 数据库---T-SQL语句(一)
一.T-SQL语句 1.创建表:create table Name(Code varchar(50),) 主键:primary key 自增长:auto_increment 外键关系:referenc ...
- asn1学习笔记
INTEGER 类型 1.由于这个类型在解码器中没有针对取值范围进行定义.所以在定义的时候要指定取值范围.如: errorcode::=ERRORCODE (1..12345678) ErrorCod ...
- 手工sql注入(重点)
sql 子查询:() select goods_name from goods where goods_id=(select max(goods_id) from goods): 联合查询:selec ...
- Atlassian In Action-Jira之二次开发(五)
到现在已经写到了第五章节,实际上离Jira的官方系统已经越来越远,本章节的内容基本上已经完全脱离了Jira这个系统本身,而是依赖Jira的API接口和数据库进行开发了.主要包含如下几个功能: 人员任务 ...
- element 上传组件 el-upload 的经验总结
前言 最近在做后台管理项目,采用的 vue-element-admin ,上传图片是一个很常用的功能,也遇到了很多问题,刚好趁此机会做一些总结. 初步总结下会提到的问题,目录如下: el-upload ...
- 努力做一个优秀的programmer [ C# 影院售票系统]
Cinema.cs类 [Serializable] // 电影院类 public class Cinema { public Cinema() { //二进制 SoldTickets = new Li ...
- PageHelper分页实战(SSM整合)
步骤一:引入SSM相关的jar包,包列表如下: 步骤二:创建或修改配置文件,配置文件清单如下: applicationContext.xml <?xml version="1.0&qu ...
- JS实现在线ps功能
功能介绍 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体 ...