如何在 JavaScript 中檢查服務器上是否存在圖像

在現代 JavaScript 中，您可以使用 Fetch API 檢查服務器上是否存在圖像或任何其他資源文件。 Fetch 是一個簡單的基於 promise 的 API，用於從服務器異步獲取資源。

下面是一個使用 Fetch API 檢查圖像是否存在的示例：

fetch('/img/bulb.svg', { method: 'HEAD' })
    .then(res => {
        if (res.ok) {
            console.log('Image exists.');
        } else {
            console.log('Image does not exist.');
        }
    }).catch(err => console.log('Error:', err));

上面的示例代碼發送一個 HTTP HEAD 請求並檢查響應代碼。如果響應正常（狀態代碼 200），則打印找到圖像。否則圖片不存在。

確保您在使用 Fetch API 時發出同源請求或在服務器上啟用了 CORS。否則會拋出跨域資源共享（CORS）被阻止的錯誤。此外，Fetch API 僅受現代瀏覽器支持，在 Internet Explorer 中不起作用。

如需更多瀏覽器支持，您始終可以使用適用於 Internet Explorer 6 及更高版本的舊 XHR：

// create an XHR object
const xhr = new XMLHttpRequest();

// listen for `onload` event
xhr.onload = () => {
    if (xhr.status == 200) {
        console.log('Image exists.');
    } else {
        console.log('Image does not exist.');
    }
};

// create a `HEAD` request
xhr.open('HEAD', '/img/bulb.svg');

// send request
xhr.send();

上述示例不僅限於檢查服務器上是否存在圖像。它們可用於檢查任何其他文件是否存在，例如 JavaScript、級聯樣式表 (CSS)、PDF 等。