Skip to main content

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

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​

Let's break down the pattern: /\.(jpg|jpeg|png|webp|avif|gif|svg)(\?.*)?$/i

  • / ... /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:

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

Table of Contents