Check if an img src is Valid or Empty in JavaScript

# Table of Contents

# Check if an img src is valid using JavaScript

To check if an img src is valid:

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

Here is the HTML for the examples.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <img
      id="img"
      src="https://example.com/does-not-exist.jpg"
      alt="banner"
    />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const img = document.getElementById('img');

img.addEventListener('error', function handleError() {
  console.log(img.src);
  // 👇️ if set to non-existent image, causes infinite loop
  // img.src = 'backup.webp'; // 👈️ must be a valid image
});

check if img src is valid

The code for this article is available on GitHub

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.

Note that if you set the image's src property to an invalid image, it will trigger the error event again and cause an infinite loop.

# Hiding the image if it fails to load

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

index.js

Copied!
img.addEventListener('error', function handleError() {
  console.log(img.src);

  img.style.display = 'none';
});

hiding image if it fails to load

The code for this article is available on GitHub

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.

index.js

Copied!
const img = document.getElementById('img');

img.addEventListener('error', function handleError() {
  console.log(img.src);

  img.style.visibility = 'hidden';
});

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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <img id="img" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const img = document.getElementById('img');

const src = img.getAttribute('src');

if (!src) {
  console.log('img src is empty');
} else {
  console.log('img src is NOT empty');
}

check if img src is empty

The code for this article is available on GitHub

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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <img
      id="img"
      src="http://bobbyhadz.com/images/blog/javascript-replace-all-child-nodes/banner.webp"
      alt="banner"
    />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const img = document.getElementById('img');

const src = img.getAttribute('src');
console.log(src); // 👉️ "http://bobbyhadz.com/images/blog/javascript-replace-all-child-nodes/banner.webp"

if (!src) {
  console.log('img src is empty');
} else {
  // 👇️ this runs
  console.log('img src is NOT empty');
}

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.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>bobbyhadz.com</title>
  </head>

  <body>
    <img id="img1" alt="banner" />
    <img id="img2" alt="banner" />

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const img1 = document.getElementById('img1');
const src1 = img1.getAttribute('src');

const img2 = document.getElementById('img2');
const src2 = img2.getAttribute('src');


if (!src1 && !src2) {
  console.log('The src attributes of both images are empty');
} else {
  console.log('The src attribute of at least 1 image is set');
}

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.

index.js

Copied!
const img1 = document.getElementById('img1');
const src1 = img1.getAttribute('src');

const img2 = document.getElementById('img2');
const src2 = img2.getAttribute('src');

if (!src1 || !src2) {
  console.log('The src attribute of at least 1 image is empty');
} else {
  console.log('The src attribute of the images is set');
}

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.

index.js

Copied!
const img = document.getElementById('img');

const src = img.getAttribute('src');
console.log(src); // 👉️ null

if (src === null || src === '') {
  console.log('img src is empty');
} else {
  console.log('img src is NOT empty');
}

The code for this article is available on GitHub

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.

index.js

Copied!
const img = document.getElementById('img');

const src = img.getAttribute('src');

if (!src) {
  console.log('img src is empty');
} else {
  console.log('img src is NOT empty');
}

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

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Check if an img src is Valid or Empty in JavaScript

# Table of Contents

# Check if an img src is valid using JavaScript

# Hiding the image if it fails to load

# Check if an img src is empty using JavaScript

# Checking if the src attribute of multiple images is empty

# Explicitly checking for null or empty string

Borislav Hadzhiev

# Checking if the `src` attribute of multiple images is empty