Bättre bruten bildhantering - CSS-tricks

Anonim

Saknade bilder visar antingen bara ingenting eller visar en (?) Stilruta när källan inte kan hittas. Istället kanske du vill ersätta det med en bild som saknar bild som du är säker på att det finns så att det finns bättre visuell feedback om att något är fel. Eller kanske du vill dölja det helt. Detta är möjligt eftersom bilder som en webbläsare inte hittar utlöser en JavaScript-händelse "fel" som vi kan titta på.

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

Dessutom kanske du vill utlösa någon Ajax-åtgärd för att skicka ett e-postmeddelande till en webbplatsadministratör när detta inträffar.