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

图片加载出错后显示默认图片图片加载出错后展示默认设置的图片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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • android数组转list_集合转json

    android数组转list_集合转json方法一:String[]newsItem={“条目1″,”条目2″,”条目3”};ArrayListlist=newArrayListCollections.addAll(list,newsItem);方法二:String[]newsItem={“条目1″,”条目2″,”条目3”}ListItem=Arrays.asLis

    2026年1月21日
    4
  • Java学习之Thymeleaf使用

    Java学习之Thymeleaf使用0x00前言为了后续的代码审计一些常用的框架和技术都是有必要了解一下,在此重拾SpringBoot等开发知识内容。0x01Thymeleaf简介Thy

    2021年12月12日
    62
  • 返回跳转指定页面的JS代码_java页面跳转的代码

    返回跳转指定页面的JS代码_java页面跳转的代码JS跳转页面参考代码第一种:window.location.href=”login.jsp?backurl=”+window.location.href;第二种:alert(“返回”);window.history.back(-1);第

    2022年8月13日
    8
  • java swing计算器_用winform编写计算器

    java swing计算器_用winform编写计算器实现要求1、使用Java图形界面组件设计软件,界面如图所示。2、软件能够满足基本的“加、减、乘、除”等运算要求。3、程序代码清晰,语法规范,结构合理,逻辑正确。4、编辑菜单中包括“复制和粘贴”两个菜单项,为菜单项编写事件代码。实现代码:importjava.awt.BorderLayout;importjava.awt.GridLayout;importjava.awt.event.ActionEvent;importjava.awt.event.ActionListener;

    2025年12月11日
    3
  • 2021 pycharm激活码(最新序列号破解)

    2021 pycharm激活码(最新序列号破解),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月20日
    47
  • 简述vue和jquery的区别「建议收藏」

    简述vue和jquery的区别「建议收藏」⾸先呢jquery他是⽤js封装的⼀个类库,主要是为了⽅便操作dom元素,⽽vue他是⼀个框架,并且呢,他会从真实dom构建出⼀个虚拟的dom树,通过di!算法渲染只发⽣改变的dom元素,其他的相同的dom元素不⽤在重新渲染.⽽使⽤jquery去改变dom元素的时候,即使有相同的dom元素也会重新渲染,jq重点操作dom,而vue重点操作数据;简单的来说就是:jquery是通过使用选择器($)选取dom对象,进行dom对象的操作,实现数据操作;它

    2022年10月16日
    3

发表回复

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

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