Xử lý hình ảnh bị hỏng tốt hơn - Thủ thuật CSS

Anonim

Hình ảnh bị thiếu sẽ chỉ hiển thị không có gì hoặc hiển thị hộp kiểu (?) Khi không thể tìm thấy nguồn của chúng. Thay vào đó, bạn có thể muốn thay thế hình ảnh đó bằng một đồ họa “thiếu hình ảnh” mà bạn chắc chắn rằng nó tồn tại để có phản hồi trực quan tốt hơn rằng có điều gì đó không ổn. Hoặc, bạn có thể muốn ẩn nó hoàn toàn. Điều này có thể xảy ra bởi vì những hình ảnh mà trình duyệt không thể tìm thấy sẽ kích hoạt sự kiện JavaScript “lỗi” mà chúng tôi có thể theo dõi.

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

Ngoài ra, bạn có thể muốn kích hoạt một số loại hành động Ajax để gửi email đến quản trị viên trang web khi điều này xảy ra.