Using javascript is there a way to tell if a resource is available on the server? For instance I have images 1.jpg - 5.jpg loaded into the html page. I'd like to call a JavaScript function every minute or so that would roughly do the following scratch code...
if "../imgs/6.jpg" exists:
var nImg = document.createElement("img6");
nImg.src = "../imgs/6.jpg";
Thoughts? Thanks!
You could use something like:
function imageExists(image_url){
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
return http.status != 404;
}
Obviously you could use jQuery/similar to perform your HTTP request.
$.get(image_url)
.done(function() {
// Do something now you know the image exists.
}).fail(function() {
// Image doesn't exist - do something else.
})
fileExists would be better name because this function does not check if image exists on server. It check if file is accessible from server. There is no check if that file actually is an image. It could be .pdf, .html, some random file renamed to *.jpg or *.png. If something ends with .jpg it doesn't mean it's 100% image :)
Image object doesn't suffer that limitation. The only advantage of this is that it won't actually download the image.
You can use the basic way image preloaders work to test if an image exists.
function checkImage(imageSrc, good, bad) {
var img = new Image();
img.onload = good;
img.onerror = bad;
img.src = imageSrc;
}
checkImage("foo.gif", function(){ console.log("good"); }, function(){ console.log("bad"); } );
checkImage("favicon.ico", function(){ console.log("good"); }, function(){ console.log("bad"); } );
return statement like @ajtrichards has in the first part of his answer.
You can just check if the image loads or not by using the built in events that is provided for all images.
The onload and onerror events will tell you if the image loaded successfully or if an error occured :
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 = '/favicon.ico';
document.body.appendChild(err);
}
image.src = "../imgs/6.jpg";
error handler.A better and modern approach is to use ES6 Fetch API to check if an image exists or not:
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));
Make sure you are either making the same-origin requests or CORS is enabled on the server.
If anyone comes to this page looking to do this in a React-based client, you can do something like the below, which was an answer original provided by Sophia Alpert of the React team here
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} />;
);
}
Basicaly a promisified version of @espascarello and @adeneo answers, with a fallback parameter:
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)Edit march 2021
After a conversation with @hitautodestruct I decided to add a more "canonical" version of the Promise based function. onerror case is now being rejected, but then caught and returning a default value:
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;
}Note: I may personally like the fetch solution more, but it has a drawback – if your server is configured in a specific way, it can return 200 / 304, even if the file doesn't exist. This, on the other hand, will do the job.
fetch, you can use the ok property of the response object to check whether the request was successful or not: fetch(url).then(res => {if(res.ok){ /*exist*/} else {/*not exist*/}});
background-image: url('/a/broken/url') gives me 200 and ok (Chrome 74).
onerror call back instead of resolve. new Promise( (resolve, reject) => { /*...*/ img.onerror = () => reject('Not found') } )Promise.all(), where rejecting one item rejects the whole list. Also, I expect it to always return something (existing image url: hence the functions name). While I am not an FP geek, I like to think about it as of an Either monad.Promise.all() in the answer. IMO if you're answer is "a promisified version..." then it should be written as close as possible to a classic promise, otherwise it may cause confusion for people who are not familiar with promises. Also, You might want to consider Promise.allSettled() instead of Promise.all() so as to not fail all promises on any reject.If you create an image tag and add it to the DOM, either its onload or onerror event should fire. If onerror fires, the image doesn't exist on the server.
You may call this JS function to check if file exists on the Server:
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;
}
}
Just Promise function versions of the answers here with true/false return value:
new Image(); methods (preferred):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 (less data, but maybe makes cors problems):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 (modern browsers, less data, maybe CORS problems)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;
}
You can do this with your axios by setting relative path to the corresponding images folder. I have done this for getting a json file. You can try the same method for an image file, you may refer these examples
If you have already set an axios instance with baseurl as a server in different domain, you will have to use the full path of the static file server where you deploy the web application.
axios.get('http://localhost:3000/assets/samplepic.png').then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
If the image is found the response will be 200 and if not, it will be 404.
Also, if the image file is present in assets folder inside src, you can do a require, get the path and do the above call with that path.
var SampleImagePath = require('./assets/samplepic.png');
axios.get(SampleImagePath).then(...)
I was having some struggles with displaying an image of a user via JS: If the user image was misssing - it gave an error.
It turns out you can do the following in the html to display an specific image when the loading of an image faills
<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!
If you are using React try this custom Image component:
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;
This works fine if you want to know if an image is in the folder
function checkImage(var, extension){
var image = new Image();
var url_image = './folder/' + var + '.' + extension;
image.src = url_image;
return image.width !== 0;
}
return image.width !== 0
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;
}
}
This is code work for me. I found when you test several images in an array and you want to immediately return, it will not work.
You need to give browser some time to load the image, otherwise it will not working.
Solutions works fine:
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)
}
})I've found my own solution : fetch the image and check the response status
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");
}
})
Simple effective, one line of code.
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();
You can refer this link for check if a image file exists with 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'`; } } ```
