HTML img onerror的应用

最新推荐文章于 2025-03-11 10:52:59 发布
最新推荐文章于 2025-03-11 10:52:59 发布
阅读量4.3k 收藏 2
点赞数
分类专栏： html 文章标签： html

我们可以给 img 标签设置一个 onerror 属性，可以在 src 路径不存在时做一些默认操作。

 

HTML img src图片路径不存在，则显示一张默认图片的方法

<img src="" onerror="this.src='img/error.png'"/>

Img的src指向的图片不存在，让img不显示出来

<img src=''  onerror='this.hidden=true'>

 

解析img图片没找到onerror事件 Stack overflow at line: 0
09-04
<img src="pic.gif" onerror="javascript:this.src='/noPic.gif';" alt="pic" /> ``` 这段代码的意思是，如果 `pic.gif` 无法加载，浏览器会尝试加载 `/noPic.gif`。然而，如果 `/noPic.gif` 也不存在，`onerror` ...
JS对img标签进行优化使用onerror显示默认图像
10-26
在HTML中，我们需要为img标签指定onerror事件处理器，并传入errorImg函数。该函数会作为onerror事件的参数调用，并将当前的img元素作为参数传递给该函数。代码示例如下： ```html <img width="32" height="32" src=...
关于html <img /> 标签中的 onerror
node的专栏
02-16 1381
img标签在使用的时候 一下几个事件非常的有用： onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉   onLoad：事件是当图片加载完成之后触发   onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载” 正常情况下
HTML img标签之onAbort、onError、onLoad事件与问题
iteye_1744的博客
07-25 715
img标签在使用的时候 一下几个事件非常的有用： onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉 onLoad：事件是当图片加载完成之后触发 onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载” 很好的利用这3个事件可以在HT...
html中利用 onerror 事件监听图片加载错误的情况
最新发布
yuzheh521的博客
03-11 394
error是 Vue.js 中用于监听 HTML<img>标签的error事件的指令。当浏览器尝试加载图像但失败时（例如，图像 URL 无效、图像不存在或由于网络问题无法加载），会触发error事件。`@error="app.logo=''"` 的作用是：一旦图片加载失败（即发生错误），就将 `app.logo` 设置为空字符串 `''`。
html img 图片加载不到或不存在时 onError
paulfzm的专栏
12-11 1492
&lt;img src="img.jpg" alt=""/&gt; html img 图片加载不到或不存在时 onError &lt;img src="img.jpg" alt="" onError="this.src=image/nopic.gif';" /&gt;   显示默认图片  
【分享】HTML＜img＞标签onerror属性使用
weixin_43146533的博客
11-14 641
常规思路是在后端获取到img 标签的src时，做个判断，如果不存在时，返回其他值，但这种方法势必要动到前端和后端两个页面代码。如果是在vue中，常用的方式可能是使用v-if来判断下回传的值，但现在是html中，如果不想写js,如何简单实现呢？碰到一个需求：img标签中如果图片找不到，会显示下图效果，希望如果找不到时，则不显示图片。抱着试试的角度，想着问问AI，果不其然，AI给了我一个满意的答复，方法是标签上增加属性。前端时间在写vue,感慨了一下vue功能的强大~昨天又依需求写回了html代码。
html onerror 使用
北七零度
01-14 1057
&amp;amp;lt;img src=&amp;quot;../img/gods.png&amp;quot; &amp;quot;javascript:this.src='https://img-blog.csdnimg.cn/20190114105818535.png';this.onerror = null&amp;quot;&amp;amp;gt;
JavaScript通过使用onerror设置默认图像显示代替alt
10-22
此外，HTML5为<img>标签引入了onerror属性，它允许开发者定义一个在图片加载失败时运行的JavaScript函数。这意味着可以将图片加载失败的错误处理逻辑集中管理，通过更少的代码实现功能，提高代码的可维护性和可读性...
微信小程序 image组件binderror使用例子与js中的onerror区别
10-20
在传统HTML和JavaScript开发中，当图片加载失败时，可以使用img标签的onerror属性。当图片无法加载时，即发生404错误时，onerror事件会被触发，然后执行定义在onerror属性中的JavaScript代码。通常在onerror事件中，...
JavaScript中的onerror事件概述及使用
10-27
JavaScript中的`onerror`事件是用于捕获和处理运行时错误的重要机制，它可以在脚本执行过程中遇到问题时提供一种优雅的错误...在实际应用中，应确保`onerror`事件处理函数的兼容性和健壮性，以覆盖尽可能多的错误场景。
原生HTML：img 相关属性详解（alt属性,onerror事件，以及其他基本属性）,css中的object-fit
qq_37899792的博客
05-20 7008
属性 属性值 描述 src URL 图像的路径 alt 文本 图像不能显示时的替换文本 title 文本 鼠标悬停时显示的内容 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 数字 设置图像边框的宽度 vspace 像素 设置图像顶部和底部...
img 标签事件 onerror 图片加载错误
weixin_42448623的博客
09-12 3571
img标签中的src图片加载失败 会出现一个碎片图标 借用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。 解决方法：可以使用一张提示错误的图片代替显示不了的图片。 代码如下： <h5>图片路径不正确 备用图片路径正确</h5> <img src="../../img/75.jpg...
JavaScript img标签自带的onload和onerror函数
ddez46767的博客
09-04 798
onload 加载完成时调用触发 原生： <img src="" alt="Park" onload=“handleImageLoaded()”/> JQuery： $("img").load(function(){ /*doSomething*/ }); onerror 原生： <img src="" alt="Park" ...
HTML中图片错误，使用默认的图片
weixin_34054866的博客
09-03 406
为什么80%的码农都做不了架构师？>>> ...
HTML资源标签onerror属性
automation13的博客
04-12 2887
测试代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;/head&gt; &lt;script&gt; alert('first'); function alertError(thisObject){
html onerror事件的使用
qq_43789643的博客
01-11 450
小知识点：图片加载错误或者无图是使用默认图片 onerror="javascript:this.src='/static/home/images/morentu.png';"
img标签的onerror属性
01-27
### HTML `img` 标签 `onerror` 属性使用方法 #### 基本概念 `onerror` 是一个事件处理器属性，用于指定图像加载失败时执行的 JavaScript 代码。这可以用来处理诸如网络错误、路径错误等情况下的用户体验优化。 #### 示例代码展示 下面是一个简单的例子来说明如何利用 `onerror` 来设置默认图片： ```html <img src="nonexistent.jpg" onerror="this.onerror=null; this.src='default.png';"> ``` 这段代码尝试加载名为 "nonexistent.jpg" 的图片；如果加载失败，则会触发 `onerror` 处理器函数，该函数将当前元素 (`this`) 的 `src` 属性更改为指向备用图片 'default.png'[^3]。 为了防止无限循环调用 `onerror`（即新设定的图片也加载失败），通常会在修改 `src` 前先清除原有的 `onerror` 事件监听器 (`this.onerror=null`)。 #### 结合框架的应用场景 对于现代前端开发环境而言，在某些情况下可能希望以更加优雅的方式管理资源加载逻辑。例如，在 Vue.js 中可以通过自定义指令实现相同的功能[^4]: ```javascript Vue.directive('getImage', { inserted(el, binding){ const imgSrc = el.getAttribute('src'); fetchImage(imgSrc).then(response => response.blob()).then(blob => { const objectUrl = URL.createObjectURL(blob); el.src = objectUrl; }).catch(() => { el.src = '/path/to/default-image'; }); } }); ``` 此段代码展示了创建一个新的 Vue 自定义指令 `v-getImage` ，它可以在插入阶段自动获取并更新 `<img>` 元素的实际源文件地址，并且在遇到任何异常情况时切换到预设好的默认图标的流程。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值