Cách ẩn biểu tượng “Không tìm thấy hình ảnh” khi không tìm thấy hình ảnh nguồn src

Bạn có biết cách ẩn biểu tượng “Không tìm thấy hình ảnh” cổ điển khỏi trang HTML được hiển thị khi không tìm thấy tệp hình ảnh không?

Bất kỳ phương pháp làm việc nào sử dụng JavaScript / jQuery / CSS?

Bạn có thể sử dụng onerrorsự kiện trong JavaScript để hành động khi hình ảnh không tải được:

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}

Trong jQuery (kể từ khi bạn hỏi):

$("#myImg").error(function () { 
    $(this).hide(); 
});

Hoặc cho tất cả các hình ảnh:

$("img").error(function () { 
    $(this).hide();
    // or $(this).css({visibility:"hidden"}); 
});

Bạn nên sử dụng visibility: hiddenthay vì .hide()nếu ẩn hình ảnh có thể thay đổi bố cục. Nhiều trang web sử dụng hình ảnh "không có hình ảnh" mặc định để thay thế, trỏ srcthuộc tính đến hình ảnh đó khi vị trí hình ảnh được chỉ định không khả dụng.

<img onerror='this.style.display = "none"'>

Tôi đã sửa đổi một chút giải pháp do Gary Willoughby đề xuất, vì nó hiển thị ngắn gọn biểu tượng hình ảnh bị hỏng. Giải pháp của tôi:

    <img src="..." style="display: none" onload="this.style.display=''">

Trong giải pháp của tôi, hình ảnh ban đầu được ẩn và chỉ hiển thị khi nó được tải thành công. Nó có một nhược điểm là người dùng sẽ không nhìn thấy hình ảnh được tải xuống một nửa. Và nếu người dùng đã tắt JS thì họ sẽ không bao giờ thấy bất kỳ hình ảnh nào

Để ẩn mọi lỗi hình ảnh, chỉ cần thêm JavaScript này ở cuối trang của bạn (ngay trước thẻ đóng nội dung):

(function() {
    var allimgs = document.images;
    for (var i = 0; i < allimgs.length; i++) {
        allimgs[i].onerror = function() {
            this.style.visibility = "hidden"; // Other elements aren't affected. 
        }
    }
})();

Có thể hơi muộn để trả lời, nhưng đây là nỗ lực của tôi. Khi tôi gặp phải vấn đề tương tự, tôi đã khắc phục nó bằng cách sử dụng div có kích thước bằng hình ảnh và đặt background-image thành div này. Nếu không tìm thấy hình ảnh, div sẽ được hiển thị trong suốt, vì vậy tất cả được thực hiện một cách im lặng mà không cần mã java-script.

Nghiên cứu nhanh về câu trả lời của Andy E , không thể live()ràng buộc được error.

// won't work (chrome 5)
$('img').live('error', function(){
     $(this).css('visibility', 'hidden');
});

Vì vậy, bạn phải đi như

$('<img/>', {
  src:    'http://www.notarget.com/fake.jpg',
  error:  function(e){
    $(this).css('visibility', 'hidden');
  }
}).appendTo(document.body);

ràng buộc trực tiếp khi error event handlertạo một phần tử mới.

tôi đã tìm thấy một phương pháp tiện lợi để thực hiện chính xác điều này, trong khi vẫn hoạt động khi sử dụng ng-srcchỉ thị trong Angular.js và như ...

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='"
  />

về cơ bản nó là một GIF trong suốt ngắn nhất (như đã thấy http://proger.i-forge.net/%D0%9A%D0%BE%D0%BC%D0%BF%D1%8C%D1%8E%D1%82% D0% B5% D1% 80 / [20121112]% 20The% 20smallest% 20transparent% 20pixel.html )

tất nhiên gif này có thể được giữ bên trong một số biến toàn cục để nó không làm rối các mẫu.

<script>
  window.fallbackGif = "..."
</script>

Và sử dụng

<img
  ng-src="{{myCtrl.myImageUrlThatWillDynamicallyChange}}" 
  onerror="this.src=fallbackGif"
  />

Vân vân.

Chỉ cần sử dụng css đơn giản

.AdminImageHolder {
display: inline-block;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
background: url(img/100x100.png) no-repeat;
border: 1px solid #ccc;
}