Phát hiện khi hình ảnh không tải được trong Javascript

Có cách nào để xác định xem đường dẫn hình ảnh có dẫn đến hình ảnh thực hay không, tức là phát hiện khi hình ảnh không tải được trong Javascript.

Đối với một ứng dụng web, tôi đang phân tích cú pháp tệp xml và tạo động các hình ảnh HTML từ danh sách các đường dẫn hình ảnh. Một số đường dẫn hình ảnh có thể không còn tồn tại trên máy chủ, vì vậy tôi muốn xử lý sự cố bằng cách phát hiện hình ảnh nào không tải được và xóa phần tử HTML img đó.

Lưu ý rằng các giải pháp JQuery sẽ không thể được sử dụng (ông chủ không muốn sử dụng JQuery, vâng, tôi biết không giúp tôi bắt đầu). Tôi biết một cách trong JQuery để phát hiện khi nào một hình ảnh được tải, nhưng không biết liệu nó có bị lỗi hay không.

Mã của tôi để tạo các phần tử img nhưng làm cách nào tôi có thể phát hiện nếu đường dẫn img dẫn đến không tải được hình ảnh?

var imgObj = new Image();  // document.createElement("img");
imgObj.src = src;

Bạn có thể thử mã sau. Tuy nhiên, tôi không thể đảm bảo về khả năng tương thích của trình duyệt, vì vậy bạn sẽ phải kiểm tra điều đó.

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

Và tôi thông cảm cho ông chủ chống lại jQuery!

Câu trả lời rất hay, nhưng nó giới thiệu một vấn đề. Bất cứ khi nào bạn chỉ định onloadhoặc onerrortrực tiếp, nó có thể thay thế lệnh gọi lại đã được chỉ định trước đó. Đó là lý do tại sao có một phương pháp hay là "đăng ký trình lắng nghe được chỉ định trên EventTarget mà nó được gọi" như họ nói trên MDN . Bạn có thể đăng ký bao nhiêu người nghe tùy ý trong cùng một sự kiện.

Hãy để tôi viết lại câu trả lời một chút.

function testImage(url) {
    var tester = new Image();
    tester.addEventListener('load', imageFound);
    tester.addEventListener('error', imageNotFound);
    tester.src = url;
}

function imageFound() {
    alert('That image is found and loaded');
}

function imageNotFound() {
    alert('That image was not found.');
}

testImage("http://foo.com/bar.jpg");

Bởi vì quá trình tải tài nguyên bên ngoài là không đồng bộ, sẽ tốt hơn nếu sử dụng JavaScript hiện đại với các hứa hẹn, chẳng hạn như sau.

function testImage(url) {

    // Define the promise
    const imgPromise = new Promise(function imgPromise(resolve, reject) {

        // Create the image
        const imgElement = new Image();

        // When image is loaded, resolve the promise
        imgElement.addEventListener('load', function imgOnLoad() {
            resolve(this);
        });

        // When there's an error during load, reject the promise
        imgElement.addEventListener('error', function imgOnError() {
            reject();
        })

        // Assign URL
        imgElement.src = url;

    });

    return imgPromise;
}

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) {
        console.log('That image is found and loaded', img);
    },

    function rejected() {
        console.log('That image was not found');
    }

);

Điều này:

<img onerror="this.src='/images/image.png'" src="...">

/**
 * Tests image load.
 * @param {String} url
 * @returns {Promise}
 */
function testImageUrl(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.addEventListener('load', resolve);
    image.addEventListener('error', reject);
    image.src = url;
  });
}

return testImageUrl(imageUrl).then(function imageLoaded(e) {
  return imageUrl;
})
.catch(function imageFailed(e) {
  return defaultImageUrl;
});

jQuery + CSS cho img

Với jQuery, điều này làm việc cho tôi:

$('img').error(function() {
    $(this).attr('src', '/no-img.png').addClass('no-img');
});

Và tôi có thể sử dụng ảnh này ở mọi nơi trên trang web của mình bất kể kích thước của nó với thuộc tính CSS3 sau:

img.no-img {
    object-fit: cover;
    object-position: 50% 50%;
}

MẸO 1: sử dụng hình ảnh vuông có kích thước tối thiểu 800 x 800 pixel.

MẸO 2: để sử dụng với chân dung người , hãy sử dụngobject-position: 20% 50%;

CSS chỉ dành cho background-img

Đối với những hình nền bị thiếu, tôi cũng đã thêm những điều sau vào mỗi background-imagekhai báo:

background-image: url('path-to-image.png'), url('no-img.png');

LƯU Ý: không hoạt động đối với hình ảnh trong suốt.

Phía máy chủ Apache

Một giải pháp khác là phát hiện hình ảnh bị thiếu với Apache trước đó để gửi đến trình duyệt và thay thế nó bằng nội dung no-img.png mặc định.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} /images/.*\.(gif|jpg|jpeg|png)$
RewriteRule .* /images/no-img.png [L,R=307]

Đây là một chức năng tôi đã viết cho một câu trả lời khác: Xác minh Url hình ảnh Javascript . Tôi không biết nếu đó là chính xác những gì bạn cần, nhưng nó sử dụng các kỹ thuật khác nhau mà bạn sẽ sử dụng trong đó bao gồm xử lý cho onload, onerror, onabortvà một thời gian chờ chung.

Bởi vì quá trình tải hình ảnh không đồng bộ, bạn gọi hàm này với hình ảnh của mình và sau đó nó sẽ gọi lại hàm của bạn vào một thời gian sau với kết quả.

giống như bên dưới:

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) {

//has picture
}
else //not{ 

}