Bessere Handhabung gebrochener Bilder CSS-Tricks

Anonim

Fehlende Bilder zeigen entweder nur nichts an oder ein (?) Stilfeld, wenn ihre Quelle nicht gefunden werden kann. Stattdessen möchten Sie dies möglicherweise durch eine Grafik mit „fehlendem Bild“ ersetzen, von der Sie sicher sind, dass sie vorhanden ist, damit Sie besser visuell wissen, dass etwas nicht stimmt. Oder Sie möchten es möglicherweise vollständig ausblenden. Dies ist möglich, weil Bilder, die ein Browser nicht finden kann, ein JavaScript-Fehlerereignis auslösen, auf das wir achten können.

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

Darüber hinaus möchten Sie möglicherweise eine Ajax-Aktion auslösen, um in diesem Fall eine E-Mail an einen Site-Administrator zu senden.