Check if an img src is Valid or Empty in JavaScript

# Table of Contents

1. Check if an img src is Valid using JavaScript
2. Check if an img src is Empty using JavaScript

# Check if an img src is valid using JavaScript

To check if an img src is valid:

1. Add an error event listener on the img element.
2. If the src is invalid, set it to a backup image.
3. Alternatively, hide the image.

Here is the HTML for the examples.

And here is the related JavaScript code.

We set an error event listener on the image element.

When an image’s source fails to load, an error event is fired at the element that initiated the load.

When the error event is fired, the handleError function gets invoked.

You could set the image’s src property to a backup image or hide the image.

# Hiding the image if it fails to load

An alternative approach is to hide the image if it fails to load.

In this example, we set the image’s display property to none, which hides the image.

Alternatively, you can set the image’s visibility property to hidden, which makes the image invisible but it still takes up space on the page.

When an element’s visibility property is set to hidden, it still takes up space on the page, however, the element is invisible (not drawn). It still affects the layout of your page as normal.

# Check if an img src is empty using JavaScript

Use the getAttribute() method to check if an image src is empty.

If the src attribute doesn’t exist, the method returns either null or an empty string, depending on the browser’s implementation.

Here is the HTML for the examples.

And here is the related JavaScript code.

We used the getAttribute method to get the value of the src attribute of the image element.

If the provided attribute is not set on the element, the method returns a null or “” (empty string) value.

If the element’s src attribute is not empty, the value of the attribute is returned, here is an example.

And here is the related JavaScript code.

If the src attribute is set on the image element, the else block runs.

# Checking if the src attribute of multiple images is empty

You can use the same approach to check if the src attribute of multiple images is empty.

And here is the related JavaScript code.

We used the logical AND (&&) operator so for the if block to run both conditions have to be met.

If the src attribute of both images is empty, the if block runs, otherwise, the else block runs.

You can use the logical OR (||) operator to check if the src attribute of at least one image is empty.

The if block is run if the src attribute of at least 1 image is empty, otherwise, the else block runs.

# Explicitly checking for null or empty string

You could also explicitly check if the src attribute of the image is set to null or an empty string to check if it’s empty.

We used the logical OR (||) operator, so the if block is run if either condition is met.

Note that the src attribute of the image might be set to either null or empty string if the src attribute of the image is empty.

The value is not unified and is browser implementation dependent.

This is why checking if the property is falsy is a much better option.

The if block will run if the src property is null or an empty string.