img的onerror属性值

最新推荐文章于 2023-07-19 10:06:07 发布
最新推荐文章于 2023-07-19 10:06:07 发布
阅读量178 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Henry_zp/archive/2010/12/09/1901593.html
版权

      在实际的项目中，img的onerror属性值是很重要的，比如像广告位那里的广告，如果路径不对，或者服务器上的图片被删除的话，那么所显示的效果肯定不是我们想要的了。

      但是，这个属性似乎不被w3c所承认，因为我用火狐的校验工具，总是在那块地方提示有错误，不知道大家有没有解决的办法。

      同时也想说的是，慎用onerror属性值，用的不好，可能会弹出一个“stack overflow at line:0”的对话框。

      网上找了一下关于“stack overflow at line:0” 的说法，但是网上的说法是堆栈的益出，当然我不排除这种可能性，但是onerror这个属性值也有可能会导致这个问题。

      代码如下：

 

 
  
 
   < 
   script  
   type 
   ="type/javascript" 
   > 
   
 
   function 
    showOtherPic(obj){
 obj.src 
   = 
   '' 
   ;
}
 
   </ 
   script 
   > 
   


 
   < 
   img  
   src 
   ="" 
    onerror 
   ="showOtherPic(this)" 
     
   /> 
  
 
 
 
 
 
 
 
 
 
 
       如果一不小心，将obj.src的路径写成了一个错误的地址，即找不到图片时，就会报”stack overflow at line:0“ ，假设首页的图片都是循环读取，当没有图片时，而onerror的图片地址又写错时，那真是杯具了，要不断地弹出这个框，直到图片结束为止。
 

 

转载于:https://www.cnblogs.com/Henry_zp/archive/2010/12/09/1901593.html

                

        

        




    

  


    

      

        

            

              
                
                  weixin_30568715
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
微信小程序 image组件binderror使用例子与js中的onerror区别

				
			

			

				

					10-20
				

			

		

		

			
				
在传统HTML和JavaScript开发中，当图片加载失败时，可以使用img标签的onerror属性。当图片无法加载时，即发生404错误时，onerror事件会被触发，然后执行定义在onerror属性中的JavaScript代码。通常在onerror事件中，...

			
		

	



                

              
                



	

		

			

				
					
原生HTML：img 相关属性详解（alt属性,onerror事件，以及其他基本属性）,css中的object-fit

				
			

			

				

					qq_37899792的博客
				

				

					05-20
					
					6796
					
				

			

		

		

			
				
属性
			属性值
			描述
		src
			URL
			图像的路径
		alt
			文本
			图像不能显示时的替换文本
		title
			文本
			鼠标悬停时显示的内容
		width
			像素
			设置图像的宽度
		height
			像素
			设置图像的高度
		border
			数字
			设置图像边框的宽度
		vspace
			像素
			设置图像顶部和底部...

			
		

	



                


  
              

                


	

		

			

				
					
关于img图片的onerror属性

				
			

			

				

					weixin_33763244的博客
				

				

					12-17
					
					270
					
				

			

		

		

			
				
在项目中用到javascript不断获取服务器的摄像头图片来显示视频效果。
但是当服务器停机时前台页面img获取失败后自动停止，服务器重启后必须手动刷新页面才能继续观看视频。现在需要前台自动识别服务器是否停机或重启。
这里主要是通过img的src属性去判断，如果src获取服务器图片失败，就设置定时器不断获取服务器图片直到成功。
怎样判断img的src获取失败，就是img的onerror事件了...

			
		

	





	

		

			

				
					
img标签加载失败方法(onerror)、加载成功(onload)的方法、readystatechange事件、complete属性

					
热门推荐

				
			

			

				

					yiyueqinghui的博客
				

				

					05-20
					
					1万+
					
				

			

		

		

			
				
1、error事件（img标签加载失败的方法）
< img src=“123” :οnerrοr=“defaultImg()” />

function defaultImg(){     //地址错误时，直接删除img标签
   this.remove()
}
或者
function defaultImg(event){        //地址错误时，设置默认图片
	 let img = event.srcElement;
	 img.src = ‘默认图片地址’;
	 img.onerror

			
		

	



		

			
		



	

		

			

				
					
HTML img标签之onAbort、onError、onLoad事件与问题

				
			

			

				

					噬魂归来的专栏
				

				

					08-26
					
					1万+
					
				

			

		

		

			
				
img标签在使用的时候 一下几个事件非常的有用： 

onError：当图片加载出现错误，会触发 经常在这里事件里头写入 将图片导向默认报错图片，以免页面上出现红色的叉叉 

onLoad：事件是当图片加载完成之后触发 

onAbort：图片加载的时候，用户通过点击停止加载（浏览器上的红色叉叉）时出发，通常在这里触发一个提示：“图片正在加载” 



很好的利用这3个事件可以

			
		

	





	

		

			

				
					
IMG 标签的 onload 和 onerror 事件

				
			

			

				

					qross的博客
				

				

					06-01
					
					1万+
					
				

			

		

		

			
				
IMG 标签一般用来加载图片，在某些情况下，还会用来做些特别的事，如记录页面访问量，老吴在很多年前见过这种玩法。除了 document 和 window 对象之外，IMG 标签是少有的几个支持 和事件的标签之一，其他还有 SCRIPT、LINK、FRAME、IFRAME 标签等，即只要有外部文件引用的标签。还有一个事件，这里不讨论。

			
		

	





	

		

			

				
					
Jquery获取和修改img的src值的方法

				
			

			

				

					12-09
				

			

		

		

			
				
本篇文章将详细介绍如何使用jQuery来获取和修改img元素的src属性值。  首先，我们要了解`src`属性在HTML中的作用。`src`属性用于指定图像文件的URL，当浏览器解析到`<img>`标签时，会根据`src`属性加载相应的图像...

			
		

	





	

		

			

				
					
img 加载网络图片失败 显示默认图片的方法

				
			

			

				

					08-30
				

			

		

		

			
				
在上面的代码中，我们使用了特殊字符单引号（'）和双引号（"）来包围 img 标签的 src 属性和 onerror 属性的值。在这里，我们需要注意特殊字符的转义问题，以免引发 JavaScript 语法错误。  结论  使用 img 标签的 ...

			
		

	





	

		

			

				
					
js判断背景图片是否加载成功使用img的width实现

				
			

			

				

					12-10
				

			

		

		

			
				
虽然对于直接的`<img>`标签，我们可以利用`onload`和`onerror`事件来判断图片是否加载成功，但是对于作为背景图片的图像，情况就有所不同。在给定的标题和描述中，提到了一种使用`Image`对象和检查`width`属性来判断...

			
		

	





	

		

			

				
					
chrome下img加载对height()的影响示例探讨

				
			

			

				

					09-04
				

			

		

		

			
				
在Chrome浏览器下，`img` 元素的加载方式对使用JavaScript（如jQuery）的`height()`...因此，在实际开发中，考虑到性能和用户体验，通常建议在CSS中预设图片的宽高，或者使用`onerror`和`onload`事件来优化加载流程。

			
		

	





	

		

			

				
					
vue中img标签404错误处理事件onerror

				
			

			

				

					m0_62823653的博客
				

				

					05-29
					
					8319
					
				

			

		

		

			
				
第一部分：vue中img标签onerror事件

第一种方法：使用@error方法能处理onerror事件（据说会导致回闪，目前没遇到）


<img :src="xxx图片资源" @error="fn">
//当图片资源加载报错404时会被调用
fn(e) {
//substitute为导入进来的图片
   e.target.src = this.substitute
 },

//若是真的遇到了回闪  @error=>:onerror
<img :src="xxx图片资源" :o

			
		

	





	

		

			

				
					
vue、uniapp利用onerror 事件处理img标签中的src图片加载失败

				
			

			

				

					彭世瑜的博客
				

				

					07-07
					
					2897
					
				

			

		

		

			
				
如果 img标签中的src图片logo.png加载失败，原来的图片位置会被error.png 替换
<img src="logo.png" onerror="handleImageError()" />

<script type="text/javascript">
  function handleImageError() {
    console.log(event);
    var img = event.target;
    img.src = "error.png"

			
		

	





	

		

			

				
					
img标签的onerror事件

					
最新发布

				
			

			

				

					偏执
				

				

					07-19
					
					2095
					
				

			

		

		

			
				
同时我们想去除载入图片失败时显示在左上角的碎片图标，这个要借用img标签的onerror事件和javascript，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。但问题来了，如果logoError.png 也不存在，则继续触发 onerror，导致循环，故会出现打开网页时提示 Stack overflow at line: 0错误。当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个logoError.png 图片。

			
		

	





	

		

			

				
					
HTML资源标签onerror属性

				
			

			

				

					automation13的博客
				

				

					04-12
					
					2790
					
				

			

		

		

			
				
测试代码：&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){
  

			
		

	





	

		

			

				
					
img标签设置默认图片

				
			

			

				

					qq_33539213的博客
				

				

					11-15
					
					4640
					
				

			

		

		

			
				
场景： 当获取图片路径或读取不到图片时，显示一张默认图片代替默认当图片碎片。

解决方法： 利用img标签的onerror事件。
当logo不存在时，将触发 onerror事件，而 onerror 中又为该 img 指定了defaultIcon图片。也就是说图片images/logo.png存在则显示logo，不存在将显示defaultIcon。
问题：如果defaultIcon 也不存在，则会...

			
		

	





	

		

			

				
					
当图片加载失败时，做处理(onerror)(vue)

				
			

			

				

					weixin_61285710的博客
				

				

					12-17
					
					1660
					
				

			

		

		

			
				
当图片加载失败时、或者加载中，做处理(onerror)(onload)(vue)，

			
		

	





	

		

			

				
					
img标签中的onerror事件

				
			

			

				

					weixin_30918415的博客
				

				

					07-15
					
					419
					
				

			

		

		

			
				
img标签中有一个onerror事件。是当我引用的src属性获取不到图片或者网络错误导致无法正常显示我src属性的图片时，显示的提示错误图片或者是可以代替的万能图片。
用法：

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


当我onerror事件中...

			
		

	





	

		

			

				
					
分析一下<img src=x onerror='eval(new Buffer(`cmVxdWlyZSgnY2hpbGRfcHJvY2VzcycpLmV4ZWMoJ2NhbGMuZXhlJywoZXJyb3IsIHN0ZG91dCwgc3RkZXJyKT0+ewphbGVydChgc3Rkb3V0OiAke3N0ZG91dH1gKTsgCn0pOw==`,`base64`).toString())'>

				
			

			

				

					07-14
				

			

		

		

			
				
这是一个基于JavaScript的代码片段，其中包含一个img标签的src属性，该属性的值是一个JavaScript代码。当图片加载失败时，会触发onerror事件，并执行其中的代码。  在这段代码中，通过eval函数执行了一段经过base64...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值