原理就是给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. ViewPager取消切换动画

    /** * Created by apk2sf on 2017/12/2. * email: apk2sf@163.com * QQ:337081267 */ public class NoAnima ...

  2. PTA 打印沙漏

    https://pintia.cn/problem-sets/17/problems/260 #include <bits/stdc++.h> using namespace std; i ...

  3. [opengl] 画一个可移动的自行车 二维几何变换（平移、旋转、缩放）

    #include <cmath> #include "glut.h" #include "iostream" using namespace std ...

  4. Java 虚拟机部分面试题

    Java虚拟机部分的面试内容包括三部分:GC.类加载机制以及内存 Java内存区域 JVM内存分为哪几部分,这些部分分别都存储哪些数据? 线程隔离的数据区:程序计数器.Java虚拟机栈.本地方法栈. ...

  5. linux初学者-DNS集群篇

    linux初学者-DNS集群篇 DNS服务器一般在使用时,为了缓解服务器的压力,多使用一个主DNS服务器,多个副DNS服务器,这些DNS服务器就组成了一个DNS集群. 在DNS主服务器配置好后,需要另 ...

  6. 如何在 Centos7 中安装 gcc

    系统环境:Centos7.4 今天在安装 Nodejs8.7 的时候,报了一个警告: WARNING: C++ Compiler too old, need g++ 4.9.4 or clang++ ...

  7. 带新手玩转MVC——不讲道理就是干（下）

    带新手玩转MVC——不讲道理就是干(下) 前言:废话不多说,直接开干 完整案例演示 案例代码 LoginServlet package servlet; import domain.User; imp ...

  8. Codeforces Round #486 (Div. 3) C "Equal Sums" （map+pair<>）

    传送门 •题意 给k个数列,从中k个数列中找出任意2个数列 i ,j 使得数列i删除第x个数,和数列j删除第y个数的和相等 若存在,输出 i ,x 和 j,y •思路 每个数列之间的联系为数列的和之间 ...

  9. 0 Spark完成WordCount操作

    先看下结果: pom.xml: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http ...

  10. hdu 6397 Character Encoding （生成函数)

    Problem Description In computer science, a character is a letter, a digit, a punctuation mark or som ...