How To Check If A URL Is An Image Using Javascript

Check if a URL is an Image using JavaScript

We have two ways to check if a URL is an image using Javascript. We use the properties of the Image object and the test() method. Follow the article below to understand how we do it.

Check if a URL is an image using Javascript

We will show you two ways to do that:

  • The first way is using the test() method.
  • The second way, we use the onload and onerror properties of the Image object.

Use test() method

test() method

This method will check the match of a previously specified string. If it matches, this method will return true. Otherwise, it will return false.

Syntax:

RegExpObject.test(string)

Parameter:

    string: Is the string for us to check for a match?

Example:

var URLImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png";

// Check URL is a image
var result = /^https?:\/\/.+\.(jpeg|jpg|webp|png)$/.test(URLImage);
console.log("Result: ", result);

Output:

Result:  true

We’ll explain to you the regular expression characters we use. Its purpose is to check the assigned URLImage string to see if the extension is an image extension (image extensions like .jpeg, .jpg, .webp, .png) and if the part head is correct or not, is ‘http://’ or ‘https://’ or not.

Explanation of symbols in regular expressions:

  •    ‘^’: matches the beginning of the string
  •    ‘?’ : appear 0 or 1 times the previous code
  •    ‘+’ : appear 1 or more times the previous code
  •    ‘.’  : any character in brackets except line break
  •    ‘$’: matches the end of the string
  •    ‘|’: matches the expression before or after ‘|’

As for the ‘\’ sign, my purpose is to get the ‘/’ character after this ‘\’ character.

And what our regular expression means is to look for strings that begin with ‘http://’ or ‘https://’ and have an image extension like .jpeg, .jpg, .webp, .png. After checking with the test() method that matches the string assigned to the variable ‘URLImage’, the result is true and false otherwise.

And that’s how we check if a URL is an image using Javascript.

The onload and onerror properties of the Image object

Example:

const img = new Image();

// Assign to img.src is an URL
img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png";

img.onload = () => {
	console.log("URL is an Image");
};

img.onerror = () => {
	console.log("URL is not an Image");
};

Output:

URL is an Image

The onload property of the Image object is called after the image is successfully loaded. If the image is successfully loaded this way, the value assigned to img.src is an image URL.

The onerror property of the Image object is called after an error occurred during image loading.

Summary

Our article has shown you two ways to check if a URL is an image using Javascript. If you want to see more tutorials like this follow us, we have lots of detailed and easy-to-understand tutorials for you.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *