Skip to main content

How to Clear or Hide an Image in JavaScript

When working with dynamic content, you often need to remove an image from view. A common first attempt is to clear the src attribute of the <img> element. However, this approach often leads to an undesirable visual result: a "broken image" icon.

This guide will explain why simply clearing the src is not enough and will teach you the two standard, professional methods for properly hiding an image using CSS properties. You will learn the critical difference between display: 'none' and visibility: 'hidden' and when to use each.

The Problem: Why Clearing src is Not the Solution​

Your first instinct might be to set the src attribute to an empty string to "clear" the image. Let's see why this is a bad idea.

<img id="my-image" src="https://www.example.org/banner/150" alt="banner">

The Flawed Approach​

const img = document.getElementById('my-image');

// This seems logical, but it causes a problem.
img.src = ''; 
// Or img.removeAttribute('src');

When you do this, most browsers will display a broken image icon in place of the original image. This looks unprofessional and is usually not the intended visual outcome. The element still exists and takes up space, but now it looks like an error.

note

The correct solution is to hide the element itself using CSS.

Method 1: Hiding the Image and Removing it from the Layout​

This is the most common requirement. When you want the image to completely vanish, as if it were never there, you should set its CSS display property to 'none'.

The Logic: setting display: 'none' removes the element from the document's layout flow. The space it once occupied will collapse, and other elements will reflow to fill the empty space.

Solution:

const img = document.getElementById('my-image');

img.style.display = 'none';

console.log(img.style.display); // Output: "none"

This is the best method when you want to completely remove the image and its footprint from the page layout.

Method 2: Hiding the Image while Preserving its Space​

Sometimes, you need to hide the image but keep the page layout stable, preventing other elements from shifting around. In this case, you should set the CSS visibility property to 'hidden'.

The logic: Setting visibility: 'hidden' makes the element invisible, but it still occupies its original space in the layout. It's like turning the element transparent.

Solution:

const img = document.getElementById('my-image');

img.style.visibility = 'hidden';

console.log(img.style.visibility); // Output: "hidden"

This is the ideal method for situations where maintaining a consistent layout is more important than reclaiming the space.

A Note on When to Clear the src Attribute​

Even though clearing the src is bad for visual results, it can still be a useful secondary step. If the image is very large and still downloading, hiding it with CSS will not stop the network request.

Best Practice: To both hide the image and stop a pending download to save bandwidth, combine the two approaches.

const img = document.getElementById('my-image');

// 1. Stop the network request by clearing the source.
img.src = '';

// 2. Hide the element to avoid a broken image icon.
img.style.display = 'none';

By doing both, you get the best of both worlds: a clean visual result and efficient network usage.

Conclusion: Which Method Should You Use?​

Choosing the right method depends entirely on your desired outcome.

  • To make the image vanish and have its space collapse, use element.style.display = 'none'. This is the most common solution.
  • To make the image vanish but preserve the page layout, use element.style.visibility = 'hidden'.
  • Consider setting element.src = '' in addition to a hiding method if you need to ensure a pending download is cancelled to save bandwidth.

Never rely on clearing the src attribute alone, as it will likely result in a broken image icon.

Table of Contents