Check if a URL is an Image using JavaScript

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.

Copied!
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.

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.

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.

Copied!
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 can check if the string starts with https:// or http:// if you want to make the regular expression stricter.

Copied!
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.

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.