html中加载图片失败,图片加载失败如何用默认图片代替
背景:图片资源加载不出来时用默认图片替换
解决方法:
一,用js方法onerror: 1,直接在html标签中使用
复制代码 2,原生js方法:
document.getElementById('#img').onerror = function(){
this.src = "images/errorLogo.png";
}复制代码 3,jquery封装后的error方法:
$('img').error(function(){
$(this).attr('src',"images/errorLogo.png");
})复制代码
以上方法若默认图片加载失败,也会变成死循环,可使用如下方法解决:
$("img").one("error", function(){
$(this).attr("src", "images/default.png");
});复制代码
或将onerror封装在函数里面,加载onerror后重置为null,如下所示:
function noImg(){
var img=event.srcElement;
img.src="data:images/errorLogo.png";
img.οnerrοr=null;
}
复制代码
二,不支持onerror时,利用css3的background设置多背景图片
background-image:url("images/logo.png"),url("images/errorLogo.png");复制代码
用这种方式第一张图会显示在第二张图片上面,前面url加载不成功直接图片不显示,将直接显示后面默认的图片资源,想要img单张的效果还需添加如下属性,并给定宽高
background-repeat: no-repeat;
background-size: cover;复制代码
这种方式的问题:两张图片都加载成功的情况下,第一张图片若有部分透明,会看到第二张图片。
详情可以查看多背景图像的使用方法:
html中加载图片失败,图片加载失败如何用默认图片代替相关推荐
- [html] img中的src加载失败时如何用默认图片来替换呢?
[html] img中的src加载失败时如何用默认图片来替换呢? img有onerror属性,加载失败时触发error事件 但是这种解决方法在error里面替换的默认图片也加载失败的时候会导致问题,需 ...
- uniapp、Vue中 image 如何设置默认图片,图片地址加载失败(404)的话就显示默认图片
一.解决方法(在单层循环中) HTML: 在image标签当中添加@error,用来监听图片地址加载失败,同时传递参数 <image v-else :src="item" m ...
- VUE:img标签加载图片失败时,显示一张自定义默认图片
简介 在使用<img />标签时,会遇到图片加载失败(有图片资源路径,但是可能路径拼接不正确.域名失效等)的情况,此时,显示出来的效果看着就很不舒服,就想显示一张默认图片. img加载失败 ...
- JS 判断图片是否是否存在--不存在则显示默认图片
1.最简便的方法:使用 img 的 onerror 事件 https://www.jb51.net/article/8796.htm 正常显示前者,错误时显示后者 <img src=" ...
- 判断图片是否存在,不存在则显示默认图片
记录每一个小坑.大坑 利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的 URL html 代码 <img src="./img/No_Pics ...
- 阿里easyexcel导出图片 图片路径失效excel写出空白或默认图片 导出多图片解决
1.1 使用String类型导出 定义自己的Converter,不使用默认的StringImageConverter public class MyStringImageConverter imp ...
- vue项目中 img标签加载图片失败,让其显示默认图片
<img src="123" @error="defImg" alt="" width="150" > 可以 ...
- htmlimg图片加载失败_html网页图片未加载完成或失败时显示默认图片
前言 一般一个内容多的网站相对会有比较多的图片文件,但是同时加载这些图片文件或加载失败时会出现空白占位,影响美观,通过脚本控制,可以实现加载需求内容图片时,加载未完成或失败的时候显示一张本地默认图片, ...
- 加载默认图片,如何避免img标签陷入onerror事件死循环
当图片加载失败的时候,我们可以利用onerror事件赋予它默认图片,但是问题来了,假如默认图片又不存在呢,即加载失败,这个时候就会陷入死循环. 为了避免死循环的情况,我们可以在执行完onerror事件 ...
最新文章
- SQL SERVER 函数ROW_NUMBER() 应用
- 【Android基础】RecyclerView的设计艺术
- I.MX6开发板移植Linux4.1.15内核之TSC2007触摸屏设备树信息的添加
- C/C++ atof函数 - C语言零基础入门教程
- 毫秒级预测,性能卓越!检测、跟踪、行为识别都搞定!这套行人分析系统重磅开源!...
- 梯度下降和delta法则
- C语言 n的作业,C语言作业练习
- 2020-08-24 每日一句
- python实现ncm转mp3_网易云音乐ncm格式分析以及ncm与mp3格式转换
- 通过设置关联菜单建立excel记账本
- adb连接Android设备使用screenrecord命令录屏和screencap命令截屏
- 互联网公司纷纷裁员,大家都在说互联网行业进入了寒冬期,你怎么看待这个说法?
- Excel绘制折线图--更新中。。。
- 微信公众平台菜单编辑php,如何使用Vue.js实现微信公众号菜单编辑器(思路详解)...
- java通过poi导出excel和pdf
- 大鱼号自媒体如何快速通过试运营转正?
- kali渗透综合靶机(三)--bulldog2靶机
- vs2015 无法启动程序 系统找不到指定的文件
- 【工业智能】知识进化论:卓越运营是如何拥抱工业智能,如虎添翼的?
- 傅里叶变换中,圆频率w与频率f之间的公式转化
热门文章
- Java 字符串转16进制数
- 如何查看端口号被哪个应用占用
- MySQL数据库配置信息查看和修改
- BLA、CRA、IDR 解释
- 如何批量给文件名加序号?
- 论文阅读 CVPR2022《Rethinking Semantic Segmentation:A Prototype View》
- 《全民打怪兽》6星英雄 之黎明神剑·克拉雷
- Tone Mapping算法系列一:基于Fast Bilateral Filtering 算法的 High-Dynamic Range(HDR) 图像显示技术
- bcp of sqlserver
- 二维正态分布的最大似然估计_机器学习系列(二)多元正态分布