How to Check if a URL Points to an Image in JavaScript

Learn how to validate image URLs in JavaScript using regex to detect common extensions like JPG, PNG, and SVG while handling query parameters and edge cases.

A common task in web development is to validate a URL to determine if it likely points to an image file. This is useful for previewing images, validating user input in a form, or deciding how to render a link. While the only way to be 100% certain is to download the file and check its content, you can perform a very effective and fast client-side check by examining the file extension in the URL string.

This guide will teach you how to use a regular expression to reliably check if a URL ends with a common image file extension. You will learn how to build a robust, reusable function that handles different extensions and even URLs with query parameters.

Core Task: Checking the File Extension

The goal is to check if a URL string, like https://example.com/path/to/my-image.jpg, ends with a known image extension. A simple check with endsWith() is not ideal because it can be fooled by URLs with query parameters (e.g., .../image.jpg?width=500). A regular expression is the perfect tool for this, as it can be designed to find the extension before any query string.

Solution: Using a Regular Expression and `.test()`

The most effective method is to use the RegExp.prototype.test() method, which returns true if a string matches a given pattern, and false otherwise.

Let's create a reusable function: this function contains a robust regex that checks for common image extensions, is case-insensitive, and correctly handles URLs with query parameters.

function isImageUrl(url) {
  // First, check if it's a string and not empty
  if (typeof url !== 'string' || url.length === 0) {
    return false;
  }
  
  // The regex pattern to match common image file extensions
  // It looks for the extension at the end of the string, before any query parameters.
  return /\.(jpg|jpeg|png|webp|avif|gif|svg)(\?.*)?$/i.test(url);
}

// ✅ Examples that return true
console.log(isImageUrl('https://example.com/photo.jpg'));
console.log(isImageUrl('/images/my-icon.PNG'));           // Case-insensitive
console.log(isImageUrl('image.gif?id=123'));              // With query parameters

// ⛔️ Examples that return false
console.log(isImageUrl('https://example.com/document.pdf'));
console.log(isImageUrl('https://example.jpeg.com/page')); // Extension not at the end
console.log(isImageUrl('not a url'));

How the Regular Expression Works

/ ... /i: The forward slashes enclose the regex, and the i at the end is a flag that makes the entire pattern case-insensitive (so .JPG works just like .jpg).
\.: The backslash escapes the dot. A dot (.) is a special character in regex that matches any character. We need to match a literal dot, so we escape it.
(jpg|jpeg|png|webp|avif|gif|svg): This is a capturing group. The pipe (|) character acts as an OR. This part of the expression matches "jpg" OR "jpeg" OR "png", and so on.
(\?.*)?: This part handles optional query parameters.
- \?: Matches a literal question mark ?.
- .*: Matches any character (.) zero or more times (*). This will match the entire query string (e.g., id=123&size=large).
- (...)?: The parentheses group this section, and the ? at the end makes the entire group optional. This ensures the regex works for URLs both with and without query strings.
$: The end-of-string anchor. This is crucial. It asserts that our pattern must occur at the very end of the string. This prevents it from incorrectly matching a URL like https://example.jpg.com/.

A Note on the Limitations of this Method

It is important to understand that this technique only validates the URL string, not the content of the file it points to.

It cannot verify that the URL is actually a valid, working link.
It cannot guarantee that the file at the URL is a real image. A server could be configured to send a PDF document with a .jpg extension.

The only way to be 100% certain of a file's type is to send a network request and check the Content-Type header in the server's response.

fetch('https://example.com/photo.jpg')
  .then(response => {
    // This header tells you the true content type
    console.log(response.headers.get('Content-Type'));
    // e.g., "image/jpeg"
  });

However, for simple client-side validation, the regular expression method is extremely fast and is "good enough" for most UI purposes.

Conclusion

Using a regular expression is the standard and most effective way to perform a client-side check to see if a URL likely points to an image.

The key takeaways are:

Use the RegExp.prototype.test() method for a simple and performant true/false result.
Your regex should be anchored to the end of the string ($) to ensure you are checking the file extension.
Make your regex case-insensitive with the /i flag.
For maximum robustness, include a pattern like (\?.*)? to correctly handle URLs that contain query parameters.