evento onerror usando background: url()

¿ Hay alguna forma de mostrar una imagen alternativa si no se encuentra la imagen de origen? Sé que para lograr esto es haciendo algo como a continuación: 

<img src="imagenotfound.gif" alt="Image not found" onError="this.src='imagefound.gif';" />

Pero, ¿qué tal si estás haciendo algo como esto, cómo puedes detectar si hay un error o si la imagen no se encuentra?

<div style="background:url('myimage.gif')"></div>
Author: Bono, 2014-03-10
Source

3 answers

En caso de que myimage.gif no sea transparente, puede usar varios fondos: 

background: url('myimage.gif'), url('fallback.gif');

De esta manera fallback.gif solo será visible si myimage.gif no está disponible.

Tenga en cuenta que fallback.gif puede descargarse incluso si myimage.gif está disponible.

Alternativamente, aunque no está ampliamente soportado, CSS Images 3 introduce la notación image() : 

background: image('myimage.gif', 'fallback.gif');

Múltiples <image-decl>s se puede dar separado por comas, en en qué caso la función representa la primera imagen que no es una imagen no válida .

 73
Author: Oriol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-29 20:40:05

Con las imágenes de fondo, no hay evento; tienes que comprobarlo tú mismo.

Haga una solicitud HTTP (XML) , y si obtiene una respuesta con un código de estado de error o no responde en absoluto (después del tiempo de espera), use otro recurso de imagen. Este enfoque está limitado por la Políticadel mismo origen .

 3
Author: PointedEars,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-09 20:30:08

También puede usar una imagen ficticia y usar el evento onerror desde allí ...

        $imageFoo = '
        <div id="' . $uniqueId . '"
             style="
                background-image: url(//foo.lall/image.png);
                -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
             "
        ></div>
        <!-- this is a helper, only needed because "background-image" did not fire a "onerror" event -->
        <img style="display: none;" 
             src="//foo.lall/image.png" 
             onerror="var fallbackImages = $(this).data(\'404-fallback\'); $(\'#' . $uniqueId . '\').css(\'background-image\', \'url(\' + fallbackImages + \')\');"
             data-404-fallback="//foo.lall/image_fallback.png"
        >
        ';
 0
Author: Lars Moelleken,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-29 08:53:17