Possible Duplicate:
Check if image exists with given url using jquery
Change image source if file exists
I am throwing the value of an image path from a textbox into boxvalue and want to validate if the image exist using javascript.
var boxvalue = $('#UrlQueueBox').val();
I browsed stackoverflow and found the below to get the image width/height, but don't want to use this.
var img = document.getElementById('imageid');
How can an I validate if it is really an image from the image path?
The general strategy is to use an DOM Image object instance, set the src property to the URL of the image you want to check (which will cause the browser to fetch and load the image), and then handle the load and error events to determine existence or absence, respectively.
Here's an example promise-based approach:
function imageExists(url) {
return new Promise(resolve => {
var img = new Image()
img.addEventListener('load', () => resolve(true))
img.addEventListener('error', () => resolve(false))
img.src = url
})
}
const url = 'http://www.google.com/images/srpr/nav_logo14.png'
imageExists(url)
.then(ok => console.log(`RESULT: exists=${ok}`))
// => RESULT: exists=true
You can create a function and check the complete property.
function ImageExists(selector) {
var imageFound = $(selector);
if (!imageFound.get(0).complete) {
return false;
}
else if (imageFound.height() === 0) {
return false;
}
return true;
}
and call this funciton
var exists = ImageExists('#UrlQueueBox');
Same function with the url instead of a selector as parameter (your case):
function imageExists(url){
var image = new Image();
image.src = url;
if (!image.complete) {
return false;
}
else if (image.height === 0) {
return false;
}
return true;
}
