¿Ingresar una imagen predeterminada en caso de que el atributo src de un html <img> no sea válido?

¿Hay alguna forma de representar una imagen predeterminada en una <img>etiqueta HTML, en caso de que el srcatributo no sea válido (usando solo HTML)? Si no es así, ¿cuál sería su forma ligera de solucionarlo?

Jun 11 '09 19:06 Ahmed

Solicitaste una solución solo HTML ...

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

<head>
  <title>Object Test</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>

<body>

  <p>
    <object data="https://stackoverflow.com/does-not-exist.png" type="image/png">
      <img src="https://cdn.sstatic.net/Img/unified/sprites.svg?v=e5e58ae7df45" alt="Stack Overflow logo and icons and such">
    </object>
  </p>

</body>

</html>

Expandir fragmento

Como la primera imagen no existe, se mostrará la alternativa (los sprites utilizados en este sitio web*). Y si está utilizando un navegador muy antiguo que no es compatible object, ignorará esa etiqueta y la usará img. Consulte el sitio web de Caniuse para conocer la compatibilidad. Este elemento es ampliamente compatible con todos los navegadores a partir de IE6+.

* A menos que la URL de la imagen haya cambiado (nuevamente), en cuyo caso probablemente verás el texto alternativo.

Jun 11 '2009 12:06 Patrick McElhaney

Esto funciona bien para mi. Quizás quieras usar JQuery para conectar el evento.

 <img src="foo.jpg" onerror="if (this.src != 'error.jpg') this.src = 'error.jpg';" alt="add alternative text here">

Actualizado con protección de errores jacquargs

Actualizado: solución exclusiva de CSS Hace poco vi una demostración de Vitaly Friedman de una excelente solución de CSS que no conocía. La idea es aplicar la contentpropiedad a la imagen rota. Normalmente :aftero :beforeno se aplican a las imágenes, pero cuando están rotas, se aplican.

<img src="nothere.jpg" alt="add alternative text here">
<style>
img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 50px;
    width: 50px;
    background-image: url(ishere.jpg);
}
</style>

Demostración: https://jsfiddle.net/uz2gmh2k/2/

Como muestra el violín, la imagen rota en sí no se elimina, pero esto probablemente resolverá el problema en la mayoría de los casos sin JS ni CSS. Si necesita aplicar diferentes imágenes en diferentes ubicaciones, simplemente diferencie con una clase:.my-special-case img:before { ...

Jun 11 '2009 13:06 Svend

Encontré esta solución en Spring in Action 3rd Ed.

<img src="../resources/images/Image1.jpg" onerror="this.src='../resources/images/none.jpg'" />

Actualización: Esta no es una solución sólo HTML... onerrores javascript

Oct 29 '2012 09:10 amit bakle