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

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

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

有什么想法吗，谢谢！

271083 次浏览
小开
最佳答案

你可以使用这样的东西:

function imageExists(image_url){


var http = new XMLHttpRequest();


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


return http.status != 404;


}

显然，您可以使用 jQuery/类似的方法来执行 HTTP 请求。

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


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


})
小开

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

小开

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

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

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

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

小开

如果有人来到这个页面，希望在基于 做出反应的客户端中完成这项工作，您可以做类似于下面这样的事情，这是由反应小组 给你的 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} />;
);
}
小开

您可以调用这个 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;
}
}
小开

这种方法很有效:

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

您可以通过设置相应图像文件夹的相对路径来实现这一点。我这样做是为了得到一个 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 内的资产文件夹中，您可以执行一个请求，获取路径并使用该路径执行上面的调用。

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

基本上 承诺版本的@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 case 现在被拒绝，但是被捕获并返回一个默认值:

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，即使该文件不存在。另一方面，这个可以起作用。

小开

一个更好、更现代的方法是使用 ES6 获取 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。

小开

您可以引用 这个链接来检查 JavaScript 中是否存在图像文件。

校验图像存在:

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

如果你正在使用 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;
小开 
function checkImage(var){
var image = new Image();
var url_image = './folder/' + variable + '.jpg';
image.src = url_image;
if (image.width == 0) {
return false;
} else {
return true;
}
}
小开

如果您想知道图像是否在文件夹中，那么这种方法可以很好地工作

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

这里只有 Promise函数版本的答案，返回值为 true/false:

使用 new Image();方法(首选) :

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(数据较少，但可能会导致心脏病问题) :

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



})()

字体脚本版本:
// with `new Image();` method
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;
});
}


// with `XMLHttpRequest` method
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);
};


});
}


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


return !!res.ok;
}
小开

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

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

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

Just wanted to share it... Perhaps this can save some time for you!

小开

这是我的代码工作。我发现当你在一个数组中测试几个图像，你想立即返回，它不会工作。

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

解决方案运行良好:

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

小开

我已经找到了自己的解决方案: 获取图像并检查响应状态

var path = "../folder/image.jpg";


fetch(path)
.then(function(response) {
if(response.status != 200){
console.log("The image exists");
}else{
console.log("The image doesn't exist");
}
})
小开

简单有效，一行代码。

var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

提交答案