前端展示图片404后使用onerror替换图片或其他变化

2024-06-09 02:32:32

有时候从后台抓来的json中没有图片对应的路径或者没有对应的图片

报错XXXX.jpg 404

这时候用onerror事件来对报错的img进行修改

<img id="" src='' onerror='imgError(this.id)' alt="">function imgError(id) {document.getElementById(id).setAttribute("src","其他图片的路径");
}

当报错的时候执行imgError事件，并且在事件里面替换图片的路径，使另一张图片来顶班。

需要注意的是，如果替换图片也找不到就会无限循环这个事件疯狂请求，所以请确保替换的图片路径和是否存在。

这里是顶替图片，如果只是简单的改变css的话可以直接在onerror事件中改变，不用额外调用一个方法，比如：

<img id="" src="" onerror="this.style.dispaly='none'" alt="">

则在默认图片找不到的时候直接隐藏该标签。

前端展示图片404后使用onerror替换图片或其他变化相关推荐

js图片压缩后上传方法,图片超过1M先进行压缩，然后再上传
js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传图片上传目录 js图片压缩后上传方法,图片超过1M先进行压缩,然后再上传 html代码 js代码 html代码 <input type ...
js实现图片不能显示时使用替换图片显示
2019独角兽企业重金招聘Python工程师标准>>> 解决方案:使用img标签的onerror属性来处理默认图片,示例如下: <html> <head> & ...
img标签图片404异常捕获返回默认图片
在<img>标签内添加错误函数: <img src="**"οnerrοr="imgerrorfun();">/*img图片404错误方 ...
前端检测图片加载失败，替换图片
最近做的一个系统出现了问题,<img/>标签添加src属性,但是你怎么知道这个路径是否无效呢? 废话不多说, //检查图片是否存在 function CheckImgExists(imgu ...
微信小程序：图片404错误，更换默认图片
app.js //远程图片no found情况下指引 errImgFun:function (ev, that){console.log("onImageError", ev);v ...
关于富文本kindeditor中上传本地图片成功后获取到的图片路径是相对路径修改为绝对路径...
找到kindeditor插件kindeditor-all.js,找到urltype的设置, K.options = {designMode : true,fullscreenMode : false, ...
php点击按钮更换图片,单击事件做个替换图片
实例 html> 使用事件给a标签添加的单击事件(结合循环遍历给a标签添加事件,达到点击就切换的效果)2019.05.08 .box { width: 500px; height: 700px; ...
前端解决图片404的问题
目前在做信息流列表的时候,需要点击不同的图片跳转不同的地址, 主要就是图片404的捕捉和替换备用图片 1.目前在用的,使用的是全集的错误捕捉 const basesrc = 'http://stati ...
java基础：map遍历使用；java使用 Patten 和Matches 进行正则匹配；后端传到前端展示图片三种情况，并保存到手机；
文章目录前言一.map 遍历方法二.java正则学习三.后端传到前端图片三种情况 1. 图片流数据(InputStream) 转 base64,前端展示保存 a. 后端:输入流转base,直接 ...

最新文章

热门文章