非常简单，也是用很少代码实现此目的的最佳方法

<img class="avatar" src="img/one.jpg" alt="Not Found" onerror=this.src="img/undefined.jpg">

对我来说，上面的作品完美！

您可以使用img元素的CSS background-image属性来完成此操作，即

img
{
background-image:url('default.png');
}

但是，您必须给予宽度或高度才能正常工作（当找不到img-src时）：

img
{
background-image:url('default.png');
width:400px;
}

<object data="foobar.png" width=200 height=200>
  <img src="test.png" alt="Just testing.">
</object>

这里foobar.png是主映像，test.png是备用映像。根据object元素的语义，当且仅当主数据（由data属性指定）无法使用时，才应呈现元素（这里为img元素）的内容。
尽管在过去的一年里，浏览器在object的实现中出现了严重的错误，但这种简单的技术似乎在IE、Firefox、Chrome的现代版本中也能起作用。

是的，你可以只使用html来做，当img源代码找不到时，它会抛出错误，所以我们可以在这里处理它.还有一点是这样设置的.onerror = null用于递归调用（默认图像找不到）

<img alt="User Image" class="user-image" src="/Resources/images/user-icon.png" onerror="this.onerror=null; this.src='/Resources/images/default_img.png'">