Lepsza obsługa uszkodzonych obrazów - CSS-Tricks

Anonim

Brakujące obrazy albo po prostu nic nie wyświetlą, albo wyświetlą pole stylu (?), Gdy nie można znaleźć ich źródła. Zamiast tego możesz zastąpić to grafiką „brakującego obrazu”, co do której jesteś pewien, że istnieje, aby uzyskać lepszą informację wizualną, że coś jest nie tak. Lub możesz całkowicie to ukryć. Jest to możliwe, ponieważ obrazy, których przeglądarka nie może znaleźć, wywołują „błąd” JavaScript, które możemy obserwować.

// Replace source $('img').on("error", function() ( $(this).attr('src', '/images/missing.png.webp'); )); // Or, hide them $("img").on("error", function() ( $(this).hide(); ));

Ponadto możesz chcieć wywołać jakąś akcję Ajax, aby wysłać wiadomość e-mail do administratora witryny, gdy to nastąpi.