图片加载出错后显示默认图片

图片加载出错后显示默认图片图片加载出错后展示默认设置的图片img因网络问题以及其他问题加载出错时,展示成下图的样式网络出错时,没有设置默认图片显示成这样使用one()绑定事件是防止默认图片也加载不出,防止死循环$(“.listList2”).one(“error”,function(e){$(this).attr(“src”,”image/head_portrait.png”);});或者img元素自带onerror属性,加载失败时,触发error事件<imgsrc=”img/yuan.

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

图片加载出错后展示默认设置的图片

img因网络问题以及其他问题加载出错时,展示成下图的样式
加载出错后显示默认图片
网络出错时,没有设置默认图片显示成这样
加载出错时,图片显示成这样

使用one()绑定事件是防止默认图片也加载不出,防止死循环

$(".listList2").one("error", function(e){
    $(this).attr("src", "image/head_portrait.png");
});

或者

img元素自带onerror属性,加载失败时,触发error事件

<img src="img/yuan.png" οnerrοr="javascript:this.src='img/xian.png';">

图片存在则显示yuan.png,图片不存在或者因网络原因将显示 xian.png
若 xian.png 也不存在,则继续触发 onerror,导致死循环,所以建议使用上面的那种方式

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/158927.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月26日 下午3:16
下一篇 2022年7月26日 下午3:16


相关推荐

  • plsql 中文乱码 字符集解决方案「建议收藏」

    plsql 中文乱码 字符集解决方案「建议收藏」1.环境变量,NLS_LANG:SIMPLIFIEDCHINESE_CHINA.ZHS16GBK2.如果想转换为UTF8字符集,可以赋予“NLS_LANG”为“AMERICAN_AMERICA.UTF8”3.oracle查看数据库字符集select*fromnls_database_parameters,其来源于props$,是表示数据库的字符集。客户端字符集环境

    2022年6月10日
    31
  • nslookup命令解析域名_nslookup是什么意思

    nslookup命令解析域名_nslookup是什么意思1、作用:查询DNS的记录,查看域名解析是否正常,在网络故障的时候用来诊断网络问题。2、命令解析命令格式:nslookupdomain[dns-server]示例:nslookupwww.163.com第一部分服务器:本机DNS服务器信息。192.168.3.1是我当前计算机的DNS服务器,由于是内网服务器名称无法获取第二部分非权威应答:Non-authoritativeanswer,除非实际存储DNSServer中获得域名解析回答的,都称为非权威应答。也就.

    2022年10月19日
    4
  • Java实现拓扑排序

    Java实现拓扑排序1 问题描述给定一个有向图 求取此图的拓扑排序序列 那么 何为拓扑排序 定义 将有向图中的顶点以线性方式进行排序 即对于任何连接自顶点 u 到顶点 v 的有向边 uv 在最后的排序结果中 顶点 u 总是在顶点 v 的前面 2 解决方案 2 1 基于减治法实现实现原理 不断地做这样一件事 在余下的有向图中求取一个源 source PS 定义入度为 0 的顶点为有向图的源 它是一个没有输入边的顶点 然后把它和

    2026年3月17日
    1
  • 深度剖析LinkedHashSet「建议收藏」

    深度剖析LinkedHashSet「建议收藏」HashMap是一个利用数组存储key-value键值对的一个数据结构,为了有序的要求,然后我们引入了LinkedHashMap来满足我们对顺序的要求,再到后面我们学习了HashSet这种数据结构,利用的是HashMap的Key的唯一性来实现HashSet的去重的目的LinkedHashSet也HashSet一样也在内部使用了HashMap,因为LinkedHashSet要维持元素之间的顺序,所以它使用的实HashMap的有序版本,也就是LinkedHashMap

    2022年10月12日
    5
  • js向数组指定位置添加元素[通俗易懂]

    js向数组指定位置添加元素[通俗易懂]一、JavaScriptsplice()方法splice()方法向/从数组中添加/删除项目,然后返回被删除的项目。方法实例//在数组指定位置插入varfruits=[“Banana”,”Orange”,”Apple”,”Mango”];fruits.splice(2,0,”Lemon”,”Kiwi”);//输出结果//Banana,Orange…

    2022年8月10日
    38
  • 阻塞与非阻塞的区别verilog_如何理解阻塞和非阻塞

    阻塞与非阻塞的区别verilog_如何理解阻塞和非阻塞简单点说:阻塞就是干不完不准回来,非阻塞就是你先干,我现看看有其他事没有,完了告诉我一声我们拿最常用的send和recv两个函数来说吧…比如你调用send函数发送一定的Byte,在系统内部s

    2022年8月1日
    12

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号