Zastąpić niedostępne obrazy za pomocą CSS?

Question

Czy można zastąpić standardowy uszkodzony obraz za pomocą CSS lub inną techniką? Wszystkie moje obrazy mają ten sam rozmiar, a moje są przezroczyste.

Próbowałem owinąć wszystkie obrazy z tła div za:

<div class="no_broken"> 
    <img src="http://www.web.com/found.gif"/> 
</div> 

<div class="no_broken"> 
    <img src="http://www.web.com/notfound.gif"/> 
</div> 

CSS:

div.no_broken { 
    background-image: url(standard.gif); 
} 

div.no_broken, div.no_broken img { 
    width: 32px; 
    height: 32px; 
    display: block; 
} 

Ale to będzie wyświetlać dwa obrazy na szczycie siebie jeśli IMG jest przezroczysty.

Answer 1

To działa bez CSS:

<img src="some.jpg" onerror="this.src='alternative.jpg';"> 

Wydaje pracować nawet gdy JavaScript jest wyłączony.

Answer 2

O ile mi wiadomo, nie ma właściwości CSS, która kontroluje wyświetlanie uszkodzonych obrazów. Może są właściwości specyficzne dla przeglądarki? Być może będziesz musiała odwołać się do Javascript, aby powtórzyć obrazy na stronie i zastąpić ich src, jeśli są uszkodzone.

Answer 3

Nie używam jakiej technologii, ale w ASP.net jest coś, co nazywa się adapterami kontrolnymi.

Użyłem tego do przechwytywania PreRender ze wszystkich obrazów i zastąpienia obrazu, jeśli obraz nie jest kompletny.

Nie wiem, czy to w ogóle odnosi się do twojej sytuacji i na pewno nie zadziała, gdy na ścieżce znajduje się ścieżka, ale nie obraz.

Answer 4

Ten kod jest JavaScript i działa tylko wtedy, gdy JS jest włączony. Dziwnie to działa, jeśli w IE, jeśli dostęp do pliku odbywa się z lokalnego komputera (z plikiem: ///). Kiedy strona jest dostępna za pomocą http, nie będzie działać bez JS.

Answer 5

Jeśli chcesz dodać trochę javascript do miksu, powinno to działać dobrze z jQuery, aby wykryć błędy obrazu i dodać do uszkodzonych obrazów jakiś rodzaj błędów CSS.

$(document).ready(function() { 
    $('.no_broken img').error(function() { 
     $(this).addClass('broken'); 
    }); 
}); 

A potem w CSS można mieć coś

div.no_broken, div.no_broken img { 
    width: 32px; 
    height: 32px; 
    display: block; 
} 

div.no_broken img.broken { 
    background-image: url(standard.gif); 
    content:""; 
} 

Answer 6

myślałem, że pakiet ten komentarz z kmoser na odpowiedź. Czyszczenie programu obsługi onerror jest dobrym pomysłem, ponieważ pętle są możliwe.

JavaScript

function epic(c) { 
    c.onerror=''; 
    c.src='alternative.jpg'; 
}; 

HTML

<img src='some.jpg' onerror='epic(this)'> 

opuszczamy ten epicki funkcję do wszystkich naszych tagów graficznych teraz na twiends, jak wyciągnąć z mnóstwem zdjęć profilowych społecznych, że wszystkie wygasają w pewnym momencie przyszłość.