Clear Img src attribute using JavaScript

# Clear Img src attribute using JavaScript

To clear an image src attribute:

Use the setAttribute() method to set the image's src attribute to an empty string.
Alternatively, hide the image element.

Here is the HTML for the examples.

index.html

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

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

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

And here is the related JavaScript code.

index.js

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

// 👇️ set image src attribute to an empty string
img.setAttribute('src', '');

// 👇️ or hide image
img.style.display = 'none';

We used the setAttribute method to set the src attribute of the image element to an empty string.

However, if you do that the image is still displayed as being broken.

Alternatively, you can hide the image by setting its display property to none.

We used the display property to hide the image element, however, you might need to use the visibility property, depending on your use case.

When an element's display property is set to none, the element is removed from the DOM and does not affect the layout. The document is rendered as though the element does not exist.

On the other hand, 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.

# Clear Img src attribute using the `visibility` property

Here is an example that sets the image's visibility property to hidden.

index.js

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

// 👇️ set image src attribute to an empty string
img.setAttribute('src', '');

// 👇️ or hide image
img.style.visibility = 'hidden';

When the image's visibility is set to hidden, it is invisible, however, it still takes up space on the page.

If you set the image's display property to none, the element is removed from the DOM and other elements take its space.

# Clear Img src attribute using removeAttribute

You can also use the removeAttribute method to clear the image's src attribute.

index.html

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

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

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

And here is the related JavaScript code.

index.js

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

// 👇️ set image src attribute to an empty string
img.removeAttribute('src');

// 👇️ or hide image
img.style.display = 'none';

The Element.removeAttribute method removes the attribute with the specified name from the element.

If you don't want to move the elements on the page when hiding the image, use the visibility property instead.

index.js

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

// 👇️ set image src attribute to an empty string
img.removeAttribute('src');

// 👇️ or hide image
img.style.visibility = 'hidden';

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.

Clear Img src attribute using JavaScript