Replacing empty <img> src attributes using JavaScript.

If you find yourself in the middle of a project where some of the images for your website are not available to you yet, this article may help you find and replace those empty src attributes with a default image of your choosing. Beware, this is a vanilla JavaScript solution and I assume here that you have at least some basic understanding of this programming language.

I stumbled upon this problem recently while working on a portfolio-like webpage. I had the summary for all the projects showcased, but I was still working on some projects and so did not have an image available for them yet. Ideally, you should never leave the src attribute empty, but I did not want to solve this manually.

I thought that simply checking each img.src and replacing the empty strings with a pre-selected image would solve my problem, but it did not. Why not? To debug this code I ran the console.log below and explored the results in my browser’s console, where I noticed something peculiar.

const images = document.querySelectorAll('img');
console.log(images[0].src);

It turns out that instead of an empty string I was getting back the URL of my webpage. Odd. After some research, I found out that this is due to most browsers’ behavior to an empty src attribute, which ends up making a new request to the original page, resulting in the original page’s URL instead of the expected empty string.

After reviewing the console.log(images) resulting NodeList I decided to solve this problem by accessing the image attribute using the img.getAttribute(‘src’) method rather than using img.src. When I ran the code below it resulted in an empty string, which is what I wanted.

console.log(images[0].getAttribute('src'));

Having accessed this I went on to write a function that checked the src attribute of my image. The logic of the if statement inside the function goes as follows: if the src attribute is empty, set the image.src path to a default image. If the src attribute is not empty we don't want anything to change so there is no need to add an else statement.

In this case, I selected an image from inside my images folder, but you can use a service like postimages.org to get a permanent link to your image and place that URL in the function instead (like image.scr = ‘https://i.postimg.cc/AbCD1e23/coming-soon.png’).

function replaceEmptySrc(image) {
   if (image.getAttribute('src') === '') {
      image.src = 'images/coming-soon.jpg';
   }
}

At one point I had about fifteen src attributes that were empty strings. Since I wanted a solution that would look into all of the images on the website checking for empty src attributes, I used the forEach method on the images NodeList and ran the previous function in it. Below you can find the complete solution.

ES6+ Solution:

const images = document.querySelectorAll('img');

images.forEach(replaceEmptySrc);

function replaceEmptySrc(image) {
   if (image.getAttribute('src') === '') {
      image.src = 'images/coming-soon.jpg';
   }
}

Shorter Solution (using the same logic):

const images = document.querySelectorAll('img');

images.forEach((image) => {
   if (image.getAttribute('src') === '') image.src = 'images/coming-soon.jpg';
});

Now, if you try to open the webpage on an IE browser you will notice that the alt attribute is being displayed instead of the replacement image. This is because the forEach method is not supported on IE browsers (you can check this on caniuse.com). When an image, for some reason, cannot be displayed the browser will display the alternate text in its place. To correct this, change the forEach method to a for loop.

IE Supported Solution:

const images = document.querySelectorAll('img');

function replaceEmptySrc() {
   for (let i = 0; i < images.length; i += 1) {
      if (images[i].getAttribute('src') === '') {
         images[i].src = 'images/coming-soon.jpg';
      }
   }
}

replaceEmptySrc();

Of course, there is more than one way to write this code and there are other solutions to this problem (with or without using JavaScript), but this is what worked for my project. I’d love for you to share your ideas and let me know what you think of my solution.

Free resources related to images:

• developer.mozilla.org: Technical information on the HTML element.
• pexels.com || pixabay.com: For free stock photos.
• tinypng.com: To reduce the file size of your images.
• postimages.org: To generate permanent links to your images.