145

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

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

想法？谢谢！

4

16 回答 16

238

你可以使用类似的东西：

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.

    })
于 2013-09-16T21:38:43.480 回答
143

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

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

于 2013-09-16T21:43:14.050 回答
60

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

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";
于 2013-09-16T21:42:50.210 回答
24

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

于 2019-05-18T07:47:45.917 回答
16

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

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} />;
    );
}
于 2016-07-13T18:25:05.000 回答
12

基本上是@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)

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

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。另一方面，这将完成这项工作。

于 2018-12-04T08:19:59.877 回答
6

如果您创建一个图像标签并将其添加到 DOM，它的 onload 或 onerror 事件应该会触发。如果 onerror 触发，则图像在服务器上不存在。

于 2013-09-16T21:39:34.037 回答
5

你可以调用这个 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;
    }
}
于 2016-11-16T05:11:55.270 回答
3

您可以通过设置相应图像文件夹的相对路径来使用您的 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 文件夹中，您可以执行要求，获取路径并使用该路径执行上述调用。

var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)
于 2018-05-30T09:59:29.717 回答
1

如果你使用 React，试试这个自定义的 Image 组件：

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;
于 2020-11-17T03:01:43.340 回答
1

我在通过 JS 显示用户图像时遇到了一些困难，有时可能会丢失。

事实证明，当加载图像失败时，您可以在 html 中执行以下操作以显示特定图像

<img src="img/path/image.png" onerror="javascript:this.src='img/path/no-image.png'">

只是想分享一下...也许这可以为您节省一些时间！

于 2022-01-03T10:22:23.203 回答
0

如果您想知道图像是否在文件夹中，这很好用

function checkImage(var, extension){
  var image = new Image();
  var url_image = './folder/' + var + '.' + extension;
  image.src = url_image;
  if (image.width == 0) {
    return false;
  } else {
    return true;
  }
}
于 2021-09-10T17:39:15.927 回答
0

这对我来说是代码工作。我发现当你在一个数组中测试几个图像并且你想立即返回时，它不会起作用。

您需要给浏览器一些时间来加载图像，否则它将无法正常工作。

解决方案工作正常：

let images = ["invalid.jpg", "invalid2.jpg", "https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png"]
let workedimages = images.slice()
images.forEach((item, index) => {
  let img = new Image()
  img.src = item
  img.onerror = () => workedimages.splice(workedimages.indexOf(item), 1)
  if (index == images.length - 1) {
    img.onload = () =>
      console.log(workedimages)
  }
})

于 2022-02-16T00:58:08.437 回答
-1

这工作正常：

function checkImage(imageSrc) {
    var img = new Image();        
    try {
        img.src = imageSrc;
        return true;
    } catch(err) {
        return false;
    }    
}
于 2018-04-18T11:56:02.013 回答
-1

只需在此处使用/返回值Promise来处理答案的版本：truefalse

有img负载：

async function imageExists(imgUrl) {
    if (!imgUrl) {
        return false;
    }
    return new Promise(res => {
        const image = new Image();
        image.onload = () => res(true);
        image.onerror = () => res(false);
        image.src = imgUrl;
    });
}

// test
(async () => {
  // true
  console.log(await imageExists('https://www.gstatic.com/webp/gallery3/1.png'));
  // false
  console.log(await imageExists('https://www.gstatic.com/webp/gallery3/DOES_NOT_EXIST_THERE.png'));
})()

使用XMLHttpRequest（更少的数据，但可能会导致 cors 问题）：

async function fileExists(fileUrl) {
    if (!fileUrl) {
        return false;
    }
    return new Promise(res => {
        const http = new XMLHttpRequest();
        http.open('HEAD', fileUrl, true);
        http.send();
        http.onload = () => {
            res(http.status != 404);
        };
        http.onerror = () => {
            res(false);
        };
    });
}

// test
(async () => {
  // true
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/1.png'));
  // false
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/DOES_NOT_EXIST_THERE.png'));
})()

使用fetch（现代浏览器，更少的数据，可能是 CORS 问题）

async function fileExists(fileUrl) {
    if (!fileUrl) {
        return false;
    }
    const res = await fetch(fileUrl, {
      method: 'HEAD',
    });
    return !!res.ok;
}

// test
(async () => {
  // false
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/1.png'));
  // false
  console.log(await fileExists('https://www.gstatic.com/webp/gallery3/DOES_NOT_EXIST_THERE.png'));
  

})()

打字稿版本：
async function imageExists(imgUrl: string | null | undefined): Promise<boolean> {
  if (!imgUrl) {
    return false;
  }

  return new Promise(res => {
    const image = new Image();
    image.onload = () => res(true);
    image.onerror = () => res(false);
    image.src = imgUrl;
  });
}

async function fileExists(fileUrl: string | null | undefined): Promise<boolean> {
  if (!fileUrl) {
    return false;
  }

  return new Promise(res => {
    const http = new XMLHttpRequest();

    http.open('HEAD', fileUrl, false);
    http.send();
    http.onload = () => {
        res(http.status != 404);
    };
    http.onerror = () => {
        res(false);
    };

  });
}


async function fileExists(fileUrl: string | null | undefined): Promise<boolean>  {
  if (!fileUrl) {
    return false;
  }
  const res = await fetch(fileUrl, {
    method: 'HEAD',
  });

  return !!res.ok;
}
于 2021-10-07T13:09:06.293 回答
-3

您可以参考此链接以检查是否存在使用 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'`;
    } } ```
于 2019-10-25T04:44:38.393 回答