首页 前端技术 img标签的onerror事件 以及 无限循环报错问题

img标签的onerror事件 以及 无限循环报错问题

有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢?

可以借用img标签的onerror事件,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下: 

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

图片images/logo.png不存在时,将触发 onerror事件,而 onerror 中又为该 img 指定了images/logoError.png图片。也就是说图片images/logo.png存在则显示logo.png,图片images/logo.png不存在将显示 logoError.png。

  *问题:如果images/logoError.png 也不存在,则会继续触发 onerror事件,导致死循环,故会出现打开网页时提示 Stack overflow at line: 0 错误。特别说明:如果图片存在,但网络很不通畅,也可能触发 onerror事件

  *解决方法:控制它不循环,代码如下:

<script type="text/javascript"> 
    function imgerrorfun(){ 
        var img=event.srcElement; 
        img.src="images/logoError.png"; 
        img.onerror=null; // 控制不要一直跳动 
    } 
</script> 
 
<img src="images/logo.png" onerror="imgerrorfun();" />


站心网

有时,img标签中的src图片加载失败,原来的图片位置会出现一个碎片图标,这样让人很不爽,如何变得美观些呢..

为您推荐

在数据库中cms_content表content字段用SQL过滤替换掉包含photo.abc.tw所有图片img标签

SQL 语句:UPDATEcms_contentSETcontent=REGEXP_REPLACE(content,'<img[^>]*src="photo\\.abc\\.tw[^"]*"[^>]*>','')WHEREcontentREGEXP'<img[^>]*src="//photo\\.abc\\.tw';解释:REGEXP_R..

.NET Core HttpClient报错The character set provided in ContentType is invalid. Cannot read content as string using an invalid character set.

使用.NET Core做一个爬虫工具,使用HttpClinet下载网页时得到了HttpResponseMessage并且状态是200,但是调用ReadAsStringAsync方法时报错:System.InvalidOperationException: The character set provided in Conten..

Blazor NavigateTo报错Microsoft.AspNetCore.Components.NavigationException:“Exception_WasThrown”

使用Blazor,在OnInitialized里执行NavigationManager.NavigateTo("/")的时候报错了:Microsoft.AspNetCore.Components.NavigationException:“Exception_WasThrown”网上看到说这个问题只出现在render-mo..

打开vmware虚拟机报错—该虚拟机似乎正在使用中

问题VMware虚拟机如果未正常退出,下一次再次打开可能会提示如下错误:该虚拟机似乎正在使用中。如果该虚拟机未在使用,请按“获取所有权(T)”按钮获取它的所有权。否则,请按“取消©”按钮以防损坏。配置文件: D:\..

Linux下编译libxml源码时,报错:/usr/include/x86_64-linux-gnu/bits/fcntl2.h:50:4: error: call to '__open...

问题描述在Linux中编译libxml的源码时,报错如下:In function open,inlined from xmlNanoHTTPSave at nanohttp.c:1185:12:/usr/include/x86_64-linux-gnu/bits/fcntl2.h:50:4: error: call to __open_missing_mode ..

Linux下编译libxml2的源码报错:you must specify a host type if you use `--no-verify'

问题描述在Ubuntu Linux下编译libxml2源码时,执行./configure时,报如下错误:ltconfig: you must specify a host type if you use --no-verifyTry ltconfig --help for more information.configure: error: libtoo..

ORACLE优化:避免SQL做大量循环逻辑处理

一个同事说以前一个运行很正常的包,突然间比以前慢了很多,执行时间非常长,晚上的作业调用这个包跑了几个小时也没有跑出数据。于是我在跟踪、优化过程中定位到包中一个存储过程的一段SQL,我将原SQL简化了一下(..

Open SUSE Linux中编译内核模块报错

最近在OpenSUSE要开发一个内核模块,一开始执行编译时报错:make[1]: *** /lib/modules/4.12.14-lp151.28.91-default/build/: 没有那个文件或目录。 停止。看起来是没有内核模块和源码导致的,于是执行了下面的安装..

EF报错Win32Exception: 证书链是由不受信任的颁发机构颁发的。

.NET8 EntityFrameworkCore连接数据库报错:An unhandled exception occurred while processing the request.Win32Exception: 证书链是由不受信任的颁发机构颁发的。Unknown locationSqlException: A connection was..

SqlServer临时表和游标循环遍历数据表方法实例

最近有个需求,有包含用户Id的表Users,包含通话记录的表MobileCalls,现在要查询表Users中某些用户联系过的通话次数最多的5个人的手机号结果集。所以考虑了一下要使用临时表和游标。用游标遍历表Users,根据表Users..

sql创建并循环临时表

在SQL中,可以使用以下语法创建临时表并进行循环操作:-- 创建临时表CREATE TEMPORARY TABLE temp_table (column1 datatype1,column2 datatype2,...);-- 循环插入数据WHILE conditionDO-- 插入数据到临时表INSERT IN..

自建的nuget Server推送时报错:Response status code does not indicate success: 406 (Not Acceptable)

问题描述在自己搭建的nuget server上通过nuget push -Source url -ApiKeyurl -ApiKey命令推送到server时报错Response status code does not indicate success: 406 (Not Acceptable),中文为:响应状态代码不指示成..

.NET6 NUnit运行测试报错xxx, Could not find testhost

问题描述最近在将以前的一个.net framework类库项目移植到.net6,单元测试之前是用的VisualStudio中集成的单元测试框架,.net6不支持了,于是更换到了NUnit框架,在运行测试用例的时候报错:Microsoft.VisualStudio...

如何打破 JavaScript 循环以及为什么您可能需要这样做

循环并不总是必须完成才能实现其目标。在这种情况下,尽早打破循环可以加快代码速度。要点JavaScript 循环对于重复代码至关重要,理解它们的语法和细微差别至关重要。Break 语句可让您提前终止循环,从而提高代码执..

循环字段的使用方式

也许大家不了解循环字段,但是大家应该知道齐博内容发布文章的时候有个副标题,$rsdb[subhead],这个字段可以在分页的时候让他不同的页面不同的标题,那么如果我想多一个这样功能的字段,在发布信息的时候同时两种副..

发表回复

返回顶部