html - que - agujetas o cordones

evento onerror utilizando background: url()

Question

¿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á haciendo algo como esto, cómo puede detectar si hay un error o si no se encuentra la imagen?

<div style="background:url(''myimage.gif'')"></div>

Answer 1

Con imágenes de fondo, no hay evento; usted tiene que comprobar usted mismo.

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

Answer 2

En caso de que myimage.gif no sea transparente, puedes 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 se puede descargar myimage.gif incluso si myimage.gif está disponible.

Alternativamente, aunque no es ampliamente compatible, CSS Images 3 introduce la notación image() :

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

Se pueden dar varios <image-decl>s separados por comas, en cuyo caso la función representa la primera imagen que no es una imagen no válida .

Answer 3

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"
        >
        '';