Tôi có một trang web bao gồm một loạt các hình ảnh. Đôi khi hình ảnh không có sẵn, vì vậy hình ảnh bị hỏng được hiển thị trong trình duyệt của khách hàng.

Làm cách nào để sử dụng jQuery để lấy tập hợp hình ảnh, lọc nó thành hình ảnh bị hỏng sau đó thay thế src?

- Tôi nghĩ sẽ dễ dàng hơn khi làm điều này với jQuery, nhưng hóa ra việc sử dụng một giải pháp JavaScript thuần túy thì dễ dàng hơn nhiều, đó là giải pháp do Prestaul cung cấp.

Xử lý onErrorsự kiện cho hình ảnh để gán lại nguồn của nó bằng JavaScript:

function imgError(image) {
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

Hoặc không có chức năng JavaScript:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

Bảng tương thích sau liệt kê các trình duyệt hỗ trợ cơ sở lỗi:

http://www.quirksmode.org/dom/events/error.html

Tôi sử dụng errortrình xử lý tích hợp:

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

Chỉnh sửa: Các error()phương pháp bị phản đối trong jquery 1.8 và cao hơn. Thay vào đó, bạn nên sử dụng .on("error")thay thế:

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

Trong trường hợp ai đó thích tôi, cố gắng đính kèm errorsự kiện vào HTML độngimg thẻ , tôi muốn chỉ ra rằng, có một nhược điểm:

Rõ ràng imgcác sự kiện lỗi không bong bóng trong hầu hết các trình duyệt, trái với những gì tiêu chuẩn nói.

Vì vậy, một cái gì đó như sau sẽ không hoạt động :

$(document).on('error', 'img', function () { ... })

Hy vọng điều này sẽ hữu ích cho người khác. Tôi ước tôi đã nhìn thấy điều này ở đây trong chủ đề này. Nhưng, tôi đã không làm thế. Vì vậy, tôi đang thêm nó

Đây là một giải pháp độc lập:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Tôi tin rằng đây là những gì bạn đang theo đuổi: jQuery.Preload

Đây là mã ví dụ từ bản demo, bạn chỉ định tải và không tìm thấy hình ảnh và bạn đã thiết lập xong:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

Nguồn: http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Trong khi OP đang tìm cách thay thế SRC, tôi chắc chắn nhiều người đánh vào câu hỏi này chỉ có thể muốn che giấu hình ảnh bị hỏng, trong trường hợp đó, giải pháp đơn giản này có hiệu quả với tôi.

Sử dụng JavaScript nội tuyến:

<img src="img.jpg" onerror="this.style.display='none';" />

Sử dụng JavaScript bên ngoài:

var images = document.querySelectorAll('img');

for (var i = 0; i < images.length; i++) {
  images[i].onerror = function() {
    this.style.display='none';
  }
}

<img src='img.jpg' />

Sử dụng JavaScript bên ngoài hiện đại:

document.querySelectorAll('img').forEach((img) => {
  img.onerror = function() {
    this.style.display = 'none';
  }
});

<img src='img.jpg' />

Xem hỗ trợ trình duyệt cho các hàm NoteList.forEach và mũi tên .

Đây là một cách nhanh chóng và bẩn thỉu để thay thế tất cả các hình ảnh bị hỏng và không cần phải thay đổi mã HTML;)

ví dụ codepen

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

Tôi không thể tìm thấy một tập lệnh phù hợp với nhu cầu của mình, vì vậy tôi đã tạo một hàm đệ quy để kiểm tra các hình ảnh bị hỏng và cố gắng tải lại chúng cứ sau bốn giây cho đến khi chúng được sửa.

Tôi đã giới hạn ở 10 lần như thể nó không được tải sau đó hình ảnh có thể không có trên máy chủ và chức năng sẽ đi vào một vòng lặp vô hạn. Tôi vẫn đang thử nghiệm mặc dù. Hãy thoải mái tinh chỉnh nó :)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});

Đây là một kỹ thuật tào lao, nhưng nó được đảm bảo khá nhiều:

<img ...  onerror="this.parentNode.removeChild(this);">

Bạn có thể sử dụng tìm nạp riêng của GitHub cho việc này:

Frontend: https://github.com/github/fetch
hoặc cho Backend, phiên bản Node.js: https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

Chỉnh sửa: Phương pháp này sẽ thay thế XHR và được cho là đã có trong Chrome. Đối với bất cứ ai đọc điều này trong tương lai, bạn có thể không cần thư viện nói trên.

Đây là JavaScript, nên tương thích trình duyệt chéo và cung cấp mà không có đánh dấu xấu xí onerror="":

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

CODEPEN:

Sử dụng cuộc gọi tốt hơn

jQuery(window).load(function(){
    $.imgReload();
});

Bởi vì việc sử dụng document.readykhông cần thiết ngụ ý rằng hình ảnh được tải, chỉ có HTML. Vì vậy, không cần cho một cuộc gọi bị trì hoãn.

Biến thể CoffeeScript :

Tôi đã khắc phục sự cố với Turbolinks khiến cho phương thức .error () được nâng lên trong Firefox đôi khi mặc dù hình ảnh thực sự ở đó.

$("img").error ->
  e = $(@).get 0
  $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0)

Bằng cách sử dụng câu trả lời của Prestaul , tôi đã thêm một số kiểm tra và tôi thích sử dụng cách jQuery hơn.

<img src="image1.png" onerror="imgError(this,1);"/>
<img src="image2.png" onerror="imgError(this,2);"/>

function imgError(image, type) {
    if (typeof jQuery !== 'undefined') {
       var imgWidth=$(image).attr("width");
       var imgHeight=$(image).attr("height");

        // Type 1 puts a placeholder image
        // Type 2 hides img tag
        if (type == 1) {
            if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') {
                $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/");
            } else {
               $(image).attr("src", "http://lorempixel.com/200/200/");
            }
        } else if (type == 2) {
            $(image).hide();
        }
    }
    return true;
}

Nếu bạn đã chèn imgvới innerHTML, như : $("div").innerHTML = <img src="wrong-uri">, bạn có thể tải một hình ảnh khác nếu nó không thực hiện, ví dụ: điều này:

<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">

Tại sao javascript: _cần thiết? Vì các tập lệnh được đưa vào DOM thông qua các thẻ tập lệnh innerHTMLkhông được chạy tại thời điểm chúng được chèn, do đó bạn phải rõ ràng.

Tôi tìm thấy bài đăng này trong khi nhìn vào bài viết SO khác . Dưới đây là một bản sao của câu trả lời tôi đã đưa ra ở đó.

Tôi biết đây là một chủ đề cũ, nhưng React đã trở nên phổ biến và, có lẽ, ai đó sử dụng React sẽ đến đây để tìm câu trả lời cho cùng một vấn đề.

Vì vậy, nếu bạn đang sử dụng React, bạn có thể làm một cái gì đó như dưới đây, đó là câu trả lời ban đầu được cung cấp bởi Ben Alpert của nhóm React tại đây

getInitialState: function(event) {
    return {image: "http://example.com/primary_image.jpg"};
},
handleError: function(event) {
    this.setState({image: "http://example.com/failover_image.jpg"});
},
render: function() {
    return (
        <img onError={this.handleError} src={src} />;
    );
}

Tôi đã tạo một fiddle để thay thế hình ảnh bị hỏng bằng cách sử dụng sự kiện "onerror". Điều này có thể giúp bạn.

    //the placeholder image url
    var defaultUrl = "url('https://sadasd/image02.png')";

    $('div').each(function(index, item) {
      var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1');
      $('<img>', {
        src: currentUrl
      }).on("error", function(e) {
        $this = $(this);
        $this.css({
          "background-image": defaultUrl
        })
        e.target.remove()
      }.bind(this))
    })

Dưới đây là một ví dụ sử dụng đối tượng Hình ảnh HTML5 được bao bọc bởi JQuery. Gọi hàm tải cho URL hình ảnh chính và nếu tải đó gây ra lỗi, hãy thay thế thuộc tính src của hình ảnh bằng một URL dự phòng.

function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) {
    var $img = $('#' + imgId);
    $(new Image()).load().error(function() {
        $img.attr('src', backupUrl);
    }).attr('src', primaryUrl)
}

<img id="myImage" src="primary-image-url"/>
<script>
    loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url');
</script>

JS thuần túy. Nhiệm vụ của tôi là: nếu hình ảnh 'bl-once.png' trống -> chèn hình ảnh đầu tiên (không có trạng thái 404) từ danh sách mảng (trong thư mục hiện tại):

<img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)">

Có lẽ nó cần được cải thiện, nhưng:

var srcToInsertArr = ['empty1.png', 'empty2.png', 'needed.png', 'notActual.png']; // try to insert one by one img from this array
    var path;
    var imgNotFounded = true; // to mark when success

    var replaceEmptyImage = {
        insertImg: function (elem) {

            if (srcToInsertArr.length == 0) { // if there are no more src to try return
                return "no-image.png";
            }
            if(!/undefined/.test(elem.src)) { // remember path
                path = elem.src.split("/").slice(0, -1).join("/"); // "http://localhost:63342/GetImage"
            }
            var url = path + "/" + srcToInsertArr[0];

            srcToInsertArr.splice(0, 1); // tried 1 src

            
                if(imgNotFounded){ // while not success
                    replaceEmptyImage.getImg(url, path, elem); // CALL GET IMAGE
                }
            

        },
        getImg: function (src, path, elem) { // GET IMAGE

            if (src && path && elem) { // src = "http://localhost:63342/GetImage/needed.png"
                
                var pathArr = src.split("/"); // ["http:", "", "localhost:63342", "GetImage", "needed.png"]
                var name = pathArr[pathArr.length - 1]; // "needed.png"

                xhr = new XMLHttpRequest();
                xhr.open('GET', src, true);
                xhr.send();

                xhr.onreadystatechange = function () {

                    if (xhr.status == 200) {
                        elem.src = src; // insert correct src
                        imgNotFounded = false; // mark success
                    }
                    else {
                        console.log(name + " doesn't exist!");
                        elem.onerror();
                    }

                }
            }
        }

    };

Vì vậy, nó sẽ chèn chính xác 'Cần.png' vào src của tôi hoặc 'no-image.png' từ thư mục hiện tại.

Tôi không chắc có cách nào tốt hơn không, nhưng tôi có thể nghĩ ra một cách hack để lấy nó - bạn có thể đăng Ajax lên URL img và phân tích phản hồi để xem hình ảnh có thực sự quay trở lại không. Nếu nó trở lại dưới dạng 404 hoặc một cái gì đó, sau đó trao đổi img. Mặc dù tôi hy vọng điều này sẽ khá chậm.

Tôi đã giải quyết vấn đề của mình với hai chức năng đơn giản sau:

function imgExists(imgPath) {
    var http = jQuery.ajax({
                   type:"HEAD",
                   url: imgPath,
                   async: false
               });
    return http.status != 404;
}

function handleImageError() {
    var imgPath;

    $('img').each(function() {
        imgPath = $(this).attr('src');
        if (!imgExists(imgPath)) {
            $(this).attr('src', 'images/noimage.jpg');
        }
    });
}

jQuery 1.8

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .error(function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

jQuery 3

// If missing.png is missing, it is replaced by replacement.png
$( "img" )
  .on("error", function() {
    $( this ).attr( "src", "replacement.png" );
  })
  .attr( "src", "missing.png" );

tài liệu tham khảo

Tôi nghĩ rằng tôi có một cách thanh lịch hơn với phái đoàn sự kiện và sự kiện chụp trên windowlà errorngay cả khi hình ảnh sao lưu không tải.

img {
  width: 100px;
  height: 100px;
}

<script>
  window.addEventListener('error', windowErrorCb, {
    capture: true
  }, true)

  function windowErrorCb(event) {
    let target = event.target
    let isImg = target.tagName.toLowerCase() === 'img'
    if (isImg) {
      imgErrorCb()
      return
    }

    function imgErrorCb() {
      let isImgErrorHandled = target.hasAttribute('data-src-error')
      if (!isImgErrorHandled) {
        target.setAttribute('data-src-error', 'handled')
        target.src = 'backup.png'
      } else {
        //anything you want to do
        console.log(target.alt, 'both origin and backup image fail to load!');
      }
    }
  }
</script>
<img id="img" src="error1.png" alt="error1">
<img id="img" src="error2.png" alt="error2">
<img id="img" src="https://i.stack.imgur.com/ZXCE2.jpg" alt="avatar">

Điểm mấu chốt là :

1. Đặt mã vào headvà thực thi như tập lệnh nội tuyến đầu tiên. Vì vậy, nó sẽ lắng nghe các lỗi xảy ra sau khi kịch bản.

2. Sử dụng ghi sự kiện để bắt lỗi, đặc biệt đối với những sự kiện không bong bóng.

3. Sử dụng ủy nhiệm sự kiện để tránh các sự kiện ràng buộc trên mỗi hình ảnh.

4. Cung cấp cho imgphần tử lỗi một thuộc tính sau khi cung cấp cho chúng backup.pngđể tránh sự biến mất của backup.pngvòng lặp vô hạn và tiếp theo như dưới đây:

img lỗi-> backup.png-> lỗi-> backup.png-> lỗi -> ,,,,,

;(window.jQuery || window.Zepto).fn.fallback = function (fallback) {
    return this.one('error', function () {
        var self = this;
        this.src = (fallback || 'http://lorempixel.com/$width/$height')
        .replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; });
    });
};

Bạn có thể vượt qua một đường dẫn giữ chỗ và gia nhập tất cả các thuộc tính từ đối tượng hình ảnh không thành công thông qua $*:

$('img').fallback('http://dummyimage.com/$widthx$height&text=$src');

http://jsfiddle.net/ARTsinn/Cu4Zn/

Điều này đã làm tôi thất vọng trong nhiều năm. Sửa CSS của tôi đặt một hình ảnh nền trên img. Khi một hình ảnh động srckhông tải lên nền trước, một trình giữ chỗ sẽ hiển thị trên imgbg của. Đây hoạt động nếu hình ảnh của bạn có kích thước mặc định (ví dụ height, min-height, widthvà / hoặc min-width).

Bạn sẽ thấy biểu tượng hình ảnh bị hỏng nhưng đó là một cải tiến. Đã thử nghiệm xuống IE9 thành công. iOS Safari và Chrome thậm chí không hiển thị biểu tượng bị hỏng.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

Thêm một hình ảnh động nhỏ để cung cấp srcthời gian để tải mà không nhấp nháy nền. Chrome mờ dần trong nền một cách mượt mà nhưng Safari trên máy tính để bàn thì không.

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  -webkit-animation: fadein 1s;
  animation: fadein 1s;                     
}

@-webkit-keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

Nếu hình ảnh không thể được tải (ví dụ, vì nó không có trong URL được cung cấp), URL hình ảnh sẽ được thay đổi thành mặc định,

Để biết thêm về .error ()

$('img').on('error', function (e) {
  $(this).attr('src', 'broken.png');
});

Tôi đã có cùng một vấn đề. Mã này hoạt động tốt trên trường hợp của tôi.

// Replace broken images by a default img
$('img').each(function(){
    if($(this).attr('src') === ''){
      this.src = '/default_feature_image.png';
    }
});

Đôi khi, việc sử dụng errorsự kiện là không khả thi, ví dụ: vì bạn đang cố gắng làm gì đó trên một trang đã được tải, chẳng hạn như khi bạn đang chạy mã thông qua bảng điều khiển, bookmarklet hoặc tập lệnh được tải không đồng bộ. Trong trường hợp đó, kiểm tra xem img.naturalWidthvàimg.naturalHeight 0 dường như thực hiện thủ thuật.

Ví dụ: đây là một đoạn để tải lại tất cả các hình ảnh bị hỏng từ bảng điều khiển:

$$("img").forEach(img => {
  if (!img.naturalWidth && !img.naturalHeight) {
    img.src = img.src;
  }
}

Tôi thấy điều này hoạt động tốt nhất, nếu bất kỳ hình ảnh nào không tải lần đầu tiên, nó sẽ bị xóa hoàn toàn khỏi DOM. Việc thực thi console.clear()giữ cho cửa sổ giao diện điều khiển sạch sẽ, vì các lỗi 404 không thể được bỏ qua với các khối thử / bắt.

$('img').one('error', function(err) {
    // console.log(JSON.stringify(err, null, 4))
    $(this).remove()
    console.clear()
})