一尘不染

如何使用img元素的onerror属性

css

CSS:

.posting-logo-div {  }
.posting-logo-img { height:120px; width:120px; }
.posting-photo-div { height:5px;width:5px;position:relative;top:-140px;left:648px; }
.posting-photo-img { height:240px; width:240px; }

HTML:

<div id="image" class="posting-logo-div"><img src="../images/some-logo1.jpg" onerror="this.src='../images/no-logo-120.jpg';" class="posting-logo-img"></div>
<div id="photo" class="posting-photo-div"><img src="../images/some-logo2.jpg" onerror="this.src='../images/no-logo-240.jpg';" class="posting-photo-img"></div>

这似乎不适用于Chrome或Mozilla,但确实适用于IE。


阅读 941

收藏
2020-05-16

共1个答案

一尘不染

这有效:

<img src="invalid_link"
     onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"
>

正如尼古拉在下面的评论中指出的那样,如果备用网址也无效,某些浏览器将再次触发“错误”事件,这将导致无限循环。我们可以通过简单地通过取消“错误”处理程序来避免这种情况this.onerror=null;

2020-05-16