使用JavaScript检查服务器上是否存在图像？

Question

使用javascript有一种方法来判断服务器上是否有资源可用？例如,我将图像1.jpg - 5.jpg加载到html页面中.我想每隔一分钟调用一次JavaScript函数,大致会执行以下的临时代码...

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

思考？谢谢!

Answer 1

你可以使用类似的东西:

function imageExists(image_url){

    var http = new XMLHttpRequest();

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

    return http.status != 404;

}

显然你可以使用jQuery/similar来执行你的HTTP请求.

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

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

    })

Answer 2

您可以使用图像预加载器的基本方式来测试图像是否存在.

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

Answer 3

您可以使用为所有图像提供的内置事件来检查图像是否加载.

在onload与onerror事件将告诉你,如果图像成功加载或发生错误后:

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";

Answer 4

一种更好的现代方法是使用 ES6 Fetch API来检查图像是否存在：

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));

确保您正在发出同源请求或在服务器上启用 CORS。

Answer 5

如果有人来到这个页面要做到这一点在一个阵营为基础的客户端,你可以这样做下面的工作,这是索菲亚阿尔珀特的阵营团队给出了一个答案原来这里

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} />;
    );
}

Answer 6

基本上是@espascarello和@adeneo 答案的promisified版本，带有后备参数：

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)

2021 年 3 月编辑 在与 @hitautodestruct 交谈后，我决定添加一个更“规范”的Promise基于函数的版本。onerrorcase 现在被拒绝，但随后被捕获并返回一个默认值：

function getImageOrFallback(url, fallback) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = url
    img.onload = () => resolve(url)
    img.onerror = () => {
      reject(`image not found for url ${url}`)
    }
  }).catch(() => {
    return fallback
  })
}

getImageOrFallback("https://google.com", "https://picsum.photos/400/300").then(validUrl => {
  console.log(validUrl)
  document.body.style.backgroundImage = `url(${validUrl})`
})

html, body {
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  overflow-y: hidden;
}

注意：我个人可能fetch更喜欢该解决方案，但它有一个缺点——如果您的服务器以特定方式配置，即使该文件不存在，它也可能返回 200 / 304。另一方面，这将完成工作。

Answer 7

如果您创建了一个图像标记并将其添加到DOM,则应该触发其onload或onerror事件.如果发生错误,则服务器上不存在该映像.

Answer 8

您可以调用此 JS 函数来检查服务器上是否存在文件：

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;
    }
}