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

如果有人来到此页面，希望在基于 React 的客户端中执行此操作，您可以执行以下操作，这是React团队的Sophia Alpert提供的答案原件{{ 3}}

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 5

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

Answer 6

这很好用：

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

Answer 7

您可以调用此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;
    }
}

Answer 8

您可以通过设置相应图像文件夹的相对路径，使用您的axios执行此操作。我这样做是为了获取一个json文件。您可以为图像文件尝试相同的方法，您可以参考这些示例

如果您已经将baseurl的axios实例设置为不同域中的服务器，则必须使用部署Web应用程序的静态文件服务器的完整路径。

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

如果找到图像，则响应为200，如果不是，则为404。

此外，如果图像文件存在于src内的assets文件夹中，则可以执行require，获取路径并使用该路径执行上述调用。

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

Answer 9

@espascarello和@adeneo答案的承诺的版本，带有后备参数：

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.

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

Answer 10

一种更好的现代方法是使用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 11

如果您使用的是React，请尝试以下自定义图片组件：

import React, { useRef } from 'react';
import PropTypes from 'prop-types';

import defaultErrorImage from 'assets/images/default-placeholder-image.png';

const Image = ({ src, alt, className, onErrorImage }) => {
  const imageEl = useRef(null);
  return (
    <img
      src={src}
      alt={alt}
      className={className}
      onError={() => {
        imageEl.current.src = onErrorImage;
      }}
      ref={imageEl}
    />
  );
};

Image.defaultProps = {
  onErrorImage: defaultErrorImage,
};

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired,
  className: PropTypes.string.isRequired,
  onErrorImage: PropTypes.string,
};

export default Image;

Answer 12

您可以参考this link来检查图像文件是否包含JavaScript。

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

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

12 个答案: