原理就是给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. Linnux命令大全（vim）

    vim复制和粘贴的基本命令(注:需先退出编辑模式)    yy复制游标所在行整行.或大写一个Y. (常用)    2yy或y2y复制两行. (常用)    y^复制至行首,或y0.不含游标所在处字元. ...

  2. zookeeper集群搭建及常用场景实现

    本文完整源码地址 基于zookeeper的常用用法.分布式锁.分布式队列及leader选举实现 https://github.com/killianxu/zookeeper_example zooke ...

  3. jmeter环境变量

    jmeter环境变量配置jmeter环境变量时,同时也需要配置Java变量(jdk最好使用1.7及1.7以上的版本)1.配置jdk环境变量安装jdk正常安装,一路默认就好,记住安装路径,配置环境变量时 ...

  4. Extjs的文件上传问题

    最近做一个ExtJs4.0的文件上传.发现在没有添加 xtype:filefield,   时提交数据form的数据,修改form都能提交,而且返回正常.但是当加入xtype:filefield后,返 ...

  5. Maven从入门到放弃

    1.maven是什么? maven是Apache下的一个纯java开发的一个开源项目,它是一款能够抽象构建过程,并且提供依赖管理,中央仓库,自动下载构建等功能的项目构建工具. 2.为什么要使用mave ...

  6. 使用vue实现行列转换的一种方法。

    行列转换是一个老生常谈的问题,这几天逛知乎有遇到了这个问题.一个前端说,拿到的数据是单列的需要做转换才能够绑定,折腾了好久才搞定,还说这个应该后端直接出数据,不应该让前端折腾. 这个嘛,行列转换在后端 ...

  7. 控制台出现_ob_:Obsever

    我遇到一个问题:我的代码想让他点击之后得到经纬度坐标数组,然后我就这样写了 然而控制台却读取出了

  8. 自定义itemCheckView

    极力推荐文章:欢迎收藏 Android 干货分享 阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以 ...

  9. 利用MAVEN打包可运行jar包，包括依赖的第三方包

    转载自:http://bglmmz.iteye.com/blog/2058914 背景: 另一篇文章说了如何利用IDEA来打包,现在来说说如何利用MAVEN打包 目标:应用本身打成一个jar包,依赖的 ...

  10. JavaScript&jQuery学习笔记

    前端JavaScript学习 JavaScript导入方式:1.外部文件导入<script src="myScript.js"></script> 2.在标 ...