img加载失败显示默认图片处理

最新推荐文章于 2024-08-20 10:32:53 发布
原创 最新推荐文章于 2024-08-20 10:32:53 发布 · 357 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html

本文介绍了如何使用HTML的img标签的onerror属性来实现图片加载失败时的备用图片加载功能。通过在img标签中设置onerror属性为'备用图片地址'，可以确保当主图片加载失败时，自动显示备用图片，从而提供更好的用户体验。

在 img 标签 加上οnerrοr=“src=’***.jpg’” ,即当图片加载失败时会自动加载***.jpg ，例如:

<img src="abc.jpg" onerror="src='123.jpg'" />
img 加载网络图片失败 显示默认图片的方法
08-30
下面小编就为大家带来一篇img 加载网络图片失败 显示默认图片的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS对img标签进行优化使用onerror显示默认图像
10-26
主要介绍了JS对img标签进行优化使用onerror显示默认图像,需要的朋友可以参考下
js针对图片加载失败的处理方法分析
10-16
主要介绍了js针对图片加载失败的处理方法,结合实例形式分析了js针对图片加载失败时的事件监听、响应等相关操作技巧,需要的朋友可以参考下
VUE：img标签加载图片失败时，显示一张自定义默认图片
热门推荐
干饭搬砖两不误。
07-29 1万+
关于img标签加载图片失败时，显示一张自定义的默认图片
img图片加载失败，使用默认图片显示。
konichiwa1996的博客
03-30 5320
img图片加载失败，显示默认图片。 当图片不存在或加载失败时，使用onerror属性设置显示默认图片。 <img src ="img/car.jpg" οnerrοr="javascript:this.src='img/noPicture.png'"/> 【注】：如果onerror中的图片因网络不畅或路径错误找不到图片，则会发生死循环，可以使用js代码来解决。 <script ...
img 加载失败特定默认图片
weixin_50559423的博客
08-20 2781
本文讲解一个简单的问题，平常我们开发的时候难免用到标签。当图片src地址不存在 及 加载失败的时候，想给一张加载失败的图片。直接上代码。 第二种 在vue中 直接直接使用 @error事件 第三种 当你确认src 可能为空或者是错误时 给一个或的条件 以上就是 图片加载失败的 显示其它默认图片的处理。看完别忘记点赞哦，小二在此谢过了！
图片加载失败显示默认图片占位符方法
06-11
但是现实中我们往往需要默认的内容来代替加载失败的图片 用以提示用户图片加载失败等信息 怎么办呢，今天懒人站长特意给大家推荐了这样一个方法： onerror="onerror=null;src='...
vue图片加载失败时用默认图片替换的方法
10-16
我们可以利用这个事件，在图片加载失败时，用预设的默认图片替换原本应该显示的图片。以下是实现这一功能的步骤： 1. **定义默认图片**：在Vue组件的`data`选项中，声明一个变量，例如`defaultImg`，用来存储默认...
微信小程序图片加载失败时替换为默认图片的方法
10-15
为了提供良好的用户体验，当图片加载失败时，通常会将默认图片显示出来，以代替无法正常显示的图片。本文将详细介绍两种处理微信小程序图片加载失败并替换为默认图片的方法。 1. 单独加载一个图片 在微信小程序中，...
vue图片加载与显示默认图片实例代码
08-31
在加载失败阶段，我们可以显示默认图片。 解决图片尺寸不统一的问题 在实际应用中，我们可能会遇到图片尺寸不统一的问题。为了解决这个问题，我们可以使用以下方法： 首先，我们可以先显示默认图片，然后加载图片...
vue图片img加载失败显示自定义默认图片(缺省图)
qq_39695210的博客
10-09 3459
vue图片img加载失败显示自定义默认图片(缺省图)
「前端进阶」如何优雅的处理图片异常
tradas的博客
07-29 686
引子 在我们的实际工作中，不可避免的会在页面中加载大量图片，但可能由于网络问题，或者图片文件缺失等问题，导致图片不能正常展示 我们希望有一种降级处理的方式，可以在图片加载失败后显示一张我们预先设定好的默认图片 监听图片的 error 事件 由于图片加载失败后，会抛出一个 error 事件，我们可以通过监听 error 事件的方式来对图片进行降级处理 复制代码let img = document....
img 图片加载错误时显示默认图片
落叶无声的专栏
02-09 3263
有时我们项目里的图片加载错误时（比如 404），为了友好体验，我们可以用一张默认图片来替代。 方法一：用 background 遮住原图片 <img src="no-such-pic.png" /> img { position: relative; height: 200px; width: 200px; } img::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height:
ios 微信 h5 中的 chooseImage 接口拿到 localId 后无法通过 img 标签显示图片
小鑫の随笔
01-06 1629
最近的一个微信 h5 项目，用到了 微信 jssdk 的 chooseImage 方法，遇到了坑，在这里记一下 需求是用户拍照或上传本地图片，先显示出来，然后再上传图片做其他的事情，弄的过程中发现，安卓可以使用 chooseImage 方法返回的 localId 显示图片，ios 显示不出图片 查了下，找到了解决方法： ios 微信6.5.3版本开始支持开发者手动切换 WKWebview 和 UIWebview，使开发者可提前对 WKWebview 进行适配 WKWebview 不再支持通过使用 choos
Vue项目img标签图片加载失败/显示不成功，显示默认图片
weixin_42931188的博客
03-04 1388
直接在img上加@error，代码如下 <img :src="form.url" alt="" @error="imgError" > /** 图片错误 */ imgError() { this.form.url = ''// 自己默认的url },
Vue img图片加载不出来或加载错误显示默认图片
yongyafang123的博客
07-29 1万+
之前写页面考虑不到什么占位图，这次UI设计都有一个占位图，不得不逼着自己更准确的考虑图片显示错误时的情况！ 1、期初，想着用背景来填充，如果图片显示则就自然而然的把背景图遮盖住了，可实际情况是，如果后台返回的图片有误不显示时，背景图上面还是会有一个破损的小图片显示不美观； background: url("../../../static/images/avaterSpaceMap.png"); b...
img图片加载错误时显示默认图片
小太阳的博客
08-08 1936
JavaScript用的onerror事件，vue用的@error。JavaScript写法。
图片加载失败后显示默认图片
梦华空影的博客
06-17 2386
<img src="{$company.logo}" onerror=src="images/logo.png">
React img 图片加载错误显示默认图片
weixin_43893087的博客
02-23 829
default images
img加载失败显示内容
最新发布
10-28
以下是几种 img 标签加载失败时显示内容的实现方法： ### 使用 onerror 事件显示默认图片 图片加载失败时会触发 `onerror` 事件，可以通过该事件使默认图片代替加载失败的图片。示例代码如下： ```html <img src="要展示的图片的地址" onerror="this.src='默认图片的地址'"> ``` 也可以结合其他 HTML 结构使用，例如： ```html <div class="img" style="background-image: url(images/thumb-ing.gif);"> <img src="{$thread['aimgs']}" loading="lazy" onerror="this.src='images/thumb-ing.gif'" style="position: absolute;height: 100%;width: 100%;margin-bottom: 0;object-fit: cover;"> </div> ``` 以上代码中，当图片加载失败时，`onerror` 事件会将 `src` 属性替换为默认图片的地址 [^3]。 ### 使用 JavaScript 控制显示自定义内容 可以使用 JavaScript 监听 `error` 事件，当图片加载失败时，隐藏图片并显示自定义内容，还可以实现点击重新加载的功能。以下是一个简单的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .error-content { display: none; } </style> </head> <body> <img id="myImage" src="nonexistent-image.jpg" alt="My Image"> <div class="error-content" id="errorContent"> <p>图片加载失败，点击重新加载</p> <button onclick="reloadImage()">重新加载</button> </div> <script> const img = document.getElementById('myImage'); const errorContent = document.getElementById('errorContent'); img.addEventListener('error', function () { img.style.display = 'none'; errorContent.style.display = 'block'; }); function reloadImage() { img.style.display = 'block'; errorContent.style.display = 'none'; img.src = img.src; } </script> </body> </html> ``` 在上述代码中，当图片加载失败时，会触发 `error` 事件，隐藏图片并显示自定义的错误提示内容，点击按钮可以重新加载图片。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值