Check if a URL is an Image using JavaScript

avatar

Borislav Hadzhiev

Last updated: Jul 25, 2022

banner

Photo from Unsplash

Check if a URL is an Image in JavaScript #

To check if a url is an image, call the test() method on a regular expression that matches an image extension at the end of a string, e.g. .png or .jpg. The test() method will check if the url ends with an image extension and will return true if it does.

index.js
function isImage(url) { return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url); } // 👇️ true console.log(isImage('https://example.com/photo.jpg')); // 👇️ true console.log(isImage('https://example.com/photo.webp')); // 👇️ false console.log(isImage('https://example.com/index.html'));

We used the RegExp.test method to check if a regular expression is matched in a string.

The forward slashes / / mark the beginning and end of the regular expression.

We escaped the dot with a backslash. This is necessary because the dot has a special meaning in regular expressions.

The parentheses are called a capturing group and the pipe | symbol means or, e.g. jpg or jpeg or png.

Either of the image extensions that are separated by pipe characters are a valid match, as long as they come after a dot and at the end of the string.

The dollar sign $ matches the end of the input. In other words, the string has to end with a .jpg extension.

This handles the edge case where the URL might contain an image extension anywhere else.

index.js
function isImage(url) { return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url); } // 👇️ false console.log(isImage('https://example.jpeg.com'));

If you ever need help reading a regular expression, check out this regex cheatsheet from MDN.

You might have to add more image extensions to the regular expression if your server hosts images with other extensions.

You can check if the string starts with https:// or http:// if you want to make the regular expression stricter.

index.js
function isImage(url) { return /^https?:\/\/.+\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url); } // 👇️ true console.log(isImage('https://example.com/photo.jpg')); // 👇️ true console.log(isImage('https://example.com/photo.webp')); // 👇️ false console.log(isImage('https://example.com/index.html'));

The caret ^ matches the beginning of the input.

The string has to start with http or https.

The question mark ? matches the preceding item (the s character) zero or 1 times. This makes the s character optional.

We used backslashes to escape the forward slashes that follow the https:// protocol.

The last thing we added is a dot and a plus. The dot . matches any single character and the plus + matches the preceding item one or more times.

This enables us to match any domain name.

In its entirety the regular expression matches strings that start with https?:// and end with a dot and an image extension.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.