Kiểm tra xem hình ảnh có tồn tại trên máy chủ bằng JavaScript không?

Sử dụng javascript có cách nào để biết tài nguyên có sẵn trên máy chủ không? Ví dụ, tôi có hình ảnh 1.jpg - 5.jpg được tải vào trang html. Tôi muốn gọi một hàm JavaScript mỗi phút hoặc lâu hơn, điều đó gần như sẽ thực hiện mã cào sau ...

if "../imgs/6.jpg" exists:
    var nImg = document.createElement("img6");
    nImg.src = "../imgs/6.jpg";

Suy nghĩ? Cảm ơn!

Bạn có thể sử dụng một cái gì đó như:

function imageExists(image_url){

    var http = new XMLHttpRequest();

    http.open('HEAD', image_url, false);
    http.send();

    return http.status != 404;

}

Rõ ràng là bạn có thể sử dụng jQuery / tương tự để thực hiện yêu cầu HTTP của mình.

$.get(image_url)
    .done(function() { 
        // Do something now you know the image exists.

    }).fail(function() { 
        // Image doesn't exist - do something else.

    })

Bạn có thể sử dụng cách cơ bản của trình tải trước hình ảnh hoạt động để kiểm tra xem hình ảnh có tồn tại hay không.

function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good; 
    img.onerror = bad;
    img.src = imageSrc;
}

checkImage("foo.gif", function(){ alert("good"); }, function(){ alert("bad"); } );

JSFiddle

Bạn chỉ có thể kiểm tra xem hình ảnh có tải hay không bằng cách sử dụng các sự kiện tích hợp được cung cấp cho tất cả các hình ảnh.

Các sự kiện onloadvà onerrorsẽ cho bạn biết nếu hình ảnh được tải thành công hoặc nếu xảy ra lỗi:

var image = new Image();

image.onload = function() {
    // image exists and is loaded
    document.body.appendChild(image);
}
image.onerror = function() {
    // image did not load

    var err = new Image();
    err.src = '/error.png';

    document.body.appendChild(err);
}

image.src = "../imgs/6.jpg";

Nếu bất kỳ ai truy cập trang này muốn thực hiện việc này trong một ứng dụng khách dựa trên React , bạn có thể làm như sau, đây là câu trả lời ban đầu được cung cấp bởi Sophia 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} />;
    );
}

Một cách tiếp cận hiện đại và tốt hơn là sử dụng API Tìm nạp ES6 để kiểm tra xem hình ảnh có tồn tại hay không:

fetch('https://via.placeholder.com/150', { method: 'HEAD' })
    .then(res => {
        if (res.ok) {
            console.log('Image exists.');
        } else {
            console.log('Image does not exist.');
        }
    }).catch(err => console.log('Error:', err));

Đảm bảo rằng bạn đang thực hiện các yêu cầu có cùng nguồn gốc hoặc CORS được bật trên máy chủ.

Nếu bạn tạo một thẻ hình ảnh và thêm nó vào DOM, thì sự kiện onload hoặc onerror của nó sẽ kích hoạt. Nếu lỗi kích hoạt, hình ảnh không tồn tại trên máy chủ.

Bạn có thể gọi hàm JS này để kiểm tra xem tệp có tồn tại trên Máy chủ hay không:

function doesFileExist(urlToFile)
{
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', urlToFile, false);
    xhr.send();

    if (xhr.status == "404") {
        console.log("File doesn't exist");
        return false;
    } else {
        console.log("File exists");
        return true;
    }
}

Về cơ bản một promisified phiên bản của @espascarello và câu trả lời @adeneo, với một tham số dự phòng:

const getImageOrFallback = (path, fallback) => {
  return new Promise(resolve => {
    const img = new Image();
    img.src = path;
    img.onload = () => resolve(path);
    img.onerror = () => resolve(fallback);
  });
};

// Usage:

const link = getImageOrFallback(
  'https://www.fillmurray.com/640/360',
  'https://via.placeholder.com/150'
  ).then(result => console.log(result) || result)

// It can be also implemented using the async / await API.

Lưu ý: Cá nhân tôi có thể thích fetchgiải pháp này hơn, nhưng nó có một nhược điểm - nếu máy chủ của bạn được định cấu hình theo một cách cụ thể, nó có thể trả về 200/304, ngay cả khi tệp của bạn không tồn tại. Điều này, mặt khác, sẽ thực hiện công việc.

Bạn có thể làm điều này với axios của mình bằng cách đặt đường dẫn tương đối đến thư mục hình ảnh tương ứng. Tôi đã làm điều này để nhận được một tệp json. Bạn có thể thử phương pháp tương tự cho tệp hình ảnh, bạn có thể tham khảo các ví dụ sau

Nếu bạn đã đặt một phiên bản axios với baseurl làm máy chủ trong miền khác, bạn sẽ phải sử dụng đường dẫn đầy đủ của máy chủ tệp tĩnh nơi bạn triển khai ứng dụng web.

  axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
            console.log(response)
        }).catch((error) => {
            console.log(error)
        })

Nếu hình ảnh được tìm thấy, phản hồi sẽ là 200 và nếu không, nó sẽ là 404.

Ngoài ra, nếu tệp hình ảnh có trong thư mục nội dung bên trong src, bạn có thể thực hiện yêu cầu, lấy đường dẫn và thực hiện lệnh gọi ở trên với đường dẫn đó.

var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)

Điều này hoạt động tốt:

function checkImage(imageSrc) {
    var img = new Image();        
    try {
        img.src = imageSrc;
        return true;
    } catch(err) {
        return false;
    }    
}

Bạn có thể tham khảo liên kết này để kiểm tra xem tệp hình ảnh có tồn tại bằng JavaScript hay không.

checkImageExist.js:

    var image = new Image();
    var url_image = './ImageFolder/' + variable + '.jpg';
    image.src = url_image;
    if (image.width == 0) {
       return `<img src='./ImageFolder/defaultImage.jpg'>`;
    } else {
       return `<img src='./ImageFolder/`+variable+`.jpg'`;
    } } ```