原理就是给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. [leetcode] 113. Path Sum II (Medium)

    原题链接 子母题 112 Path Sum 跟112多了一点就是保存路径 依然用dfs,多了两个vector保存路径 Runtime: 16 ms, faster than 16.09% of C++ ...

  2. Java 将PDF 转为Word、图片、SVG、XPS、Html、PDF/A

    本文将介绍通过Java编程来实现PDF文档转换的方法.包括: 1. PDF转为Word 2. PDF转为图片 3. PDF转为Html 4. PDF转为SVG 4.1 将PDF每一页转为单个的SVG ...

  3. 什么是icmp协议？

    英文原义:Internet Control Message Protocol 中文释义:(RFC-792)Internet控制消息协议 定义:      ICMP协议是一种面向无连接的协议,用于传输出 ...

  4. 【数据库】postgresql数据库创建自增序列id的注意事项

    1.创建一张表 CREATE TABLE "public"."tt" ( "name" varchar(128), "status ...

  5. 名称空间(name space)

    名称空间(name space) 函数编程中,有一个挥之不去的问题:变量名的定义. 我们知道,在相同的作用域内不能出现两个相同的变量名,否则前者被后者覆盖 我们还知道,局部变量的名字可以与全局变量的名 ...

  6. 有容云-【原理】Docker存储驱动之AUFS

    编者按:今天聊一聊Docker的Image(镜像)与Container(容器)的存储以及存储驱动之AUFS.   Docker存储驱动简介 Docker内置多种存储驱动,每种存储驱动都是基于Linux ...

  7. Oracle_InstantClient 及PL/SQL Developer工具的安装

    一.下载 InstantClient 地址: http://www.oracle.com/technology/software/tech/oci/instantclient/index.html i ...

  8. 记一次使用LR测试UDP和TCP的过程

    背景 最近项目要做性能测试,要出要一份性能报告,让我出一个有关Tcp和Udp的功能模块的测试,流程大概是这样,先走TCP协议协商一下会话,协商成功后走Udp收发数据. 有点简单啊,自己写个功能模块测一 ...

  9. shardingjdbc 强制路由走主库查询实时数据 避免主从同步数据延迟

    @Beanpublic shardingsphere.demo.entity.Order order(){ shardingsphere.demo.entity.Order order=new Ord ...

  10. CentOS 7服务器安装brook和bbr加速

    一.安装Brook 执行一键部署脚本 $ wget -N --no-check-certificate wget -N --no-check-certificate https://raw.githu ...