Answers:
您可以使用类似:
function imageExists(image_url){
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
return http.status != 404;
}
显然,您可以使用jQuery / like执行HTTP请求。
$.get(image_url)
.done(function() {
// Do something now you know the image exists.
}).fail(function() {
// Image doesn't exist - do something else.
})
fileExists
会更好,因为此功能不会检查服务器上是否存在映像。它检查是否可以从服务器访问文件。没有检查该文件是否实际上是图像。它可以是.pdf,.html,也可以是一些随机文件,重命名为* .jpg或* .png。如果某些内容以.jpg结尾,则并不代表它是100%的图片:)
Image
对象不会受到该限制。这样做的唯一好处是它实际上不会下载图像。
您可以使用图像预加载器的基本工作方式来测试图像是否存在。
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"); } );
return
在他的回答的第一部分中使用@ajtrichards 这样的语句来完成此操作。
您可以通过使用为所有图像提供的内置事件来检查图像是否加载。
在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";
error
处理程序。
如果有人访问此页面并希望在基于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} />;
);
}
您可以调用此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;
}
}
基本上是@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。另一方面,这将完成工作。
fetch
,您可以使用对象的ok
属性response
检查请求是否成功: fetch(url).then(res => {if(res.ok){ /*exist*/} else {/*not exist*/}});
background-image: url('/a/broken/url')
给我200
和ok
(Chrome 74)。
您可以通过将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(...)
这工作正常:
function checkImage(imageSrc) {
var img = new Image();
try {
img.src = imageSrc;
return true;
} catch(err) {
return false;
}
}
您可以引用此链接来检查图像文件是否包含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'`; } } ```