原理就是给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实现哲学家进餐问题。WINDOWS下。

    // 解决哲学家就餐问题// 每个哲学家可用一个线程来模拟.// 设有5个哲学家,5只筷子,每个哲学家吃饭时间为一个随机值,哲学家吃饭后的思考时间也是一个随机值.#include <Window ...

  2. 解读Android MediaPlayer 详细使用方法

        MediaPlayer具有非常强大的功能,对音视频的播放均提供了支持,为了保证播放期间系统的正常工作,需要设置"android.permission.WAKE_LOCK"权 ...

  3. nl2br()处理字符串中的换行符

    nl2br() 函数 在字符串中包含换行符时,需要对其进行转换,php 中有str_replace()函数,可以直接对字符串进行替换处理.但php中还有nl2br()函数可以直接处理. 1.在字符串中 ...

  4. @ConfigurationProperties 注解使用姿势，这一篇就够了

    在编写项目代码时,我们要求更灵活的配置,更好的模块化整合.在 Spring Boot 项目中,为满足以上要求,我们将大量的参数配置在 application.properties 或 applicat ...

  5. Docker 安装部署Sql Server

    前言 在如今,容器化概念越来越盛行,.Net Core项目也可以跨平台部署了,那么思考下Sql Server能不能呢?当然是可以的啦.本文今天就是介绍Docker部署配置和连接Sql Server.本 ...

  6. 如何编译生成Linux-C静态链接库

    目标生成的静态库文件为:libnpcp.a 举例:我们有四个文件分别为:npcp.c npcp.h other.h main.c main.h在npcp.c里面#include "other ...

  7. TCP报文指针解释，IP地址

    三次握手TCP报文指针内容: 1.URG:紧急指针,当URG=1,表明紧急指针字段有效,告诉系统报文有紧急内容. 2.ACK:  确认指针,当ACK=1,确认号字段有效. 3.PSH:推送指针,当两个 ...

  8. Spring中FactoryBean的作用和实现原理

    BeanFactory与FactoryBean,相信很多刚翻看Spring源码的同学跟我一样很好奇这俩货怎么长得这么像,分别都是干啥用的.BeanFactory是Spring中Bean工厂的顶层接口, ...

  9. ipad pro 为什么不行

    TalkingData公布的数据显示,iPad Pro在中国发行首月的销量仅为49 300台,而此前iPad Air 2发行首月后销量曾高达55.7万台.那么到底是什么原因,让这个被寄予厚望的iPad ...

  10. 控制台出现_ob_:Obsever

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