CODEWITHSUNDEEP
javascripthtmldomreplace
ChrisBenyamin
ChrisBenyamin

Reputation: 1728

How to replace all empty <img src=""> on a page with JavaScript on dom loaded?

I need a function, that starts, when the DOM is loaded.

In my HTML Page are several empty Image Tags, like and I want to add an Image-Name into the src-property when everything is loaded to get something like

<img src="blank.jpg">.

Best wishes Chris

Upvotes: 5

Views: 12832

Answers (7)

Pavel Strakhov
Pavel Strakhov

Reputation: 40512

Construction <img src=""> is invalid. Never use it.

It's invalid because empty url means url to current page. But current page is HTML document, not image. Browser can make another query of current page and try to use it as image (see this page).

Upvotes: 8

nurmdrafi
nurmdrafi

Reputation: 529

Replace images if null from API data using dom manipulation

const images = document.getElementsByTagName('img');
        for(const img of images){
            const src = img.getAttribute('src');
            if(src === "null" && strGender === "Male"){
                img.src = "img/placeholder-male.jpg";
            } else if(src === "null" && strGender === "Female"){
                img.src = "img/placeholder-female.jpg"
            }
        }

Upvotes: 0

Shamshad Zaheer
Shamshad Zaheer

Reputation: 247

With JQuery you can simply solve your problem using following code.

$(function(){
   $("img[src='']").attr("src", "blank.jpg");
});

Upvotes: 0

Rodrick Chapman
Rodrick Chapman

Reputation: 5543

function replaceSrc()
{

    var images = document.getElementsByTagName('img');

    for(var i = 0; i < images.length; i++)
    {
        var img = images[i];

        if(img.src.length == 0)
        {
            img.src = 'blank.jpg';
        }
    }
}


window.onload = replaceSrc;

OR if you want to add more than one handler for the event:

document.addEventListener('load', replaceSrc, false) //W3C
document.attachEvent('onload', replaceSrc); //IE

With jQuery

   $(document)
     .ready(function() { $('img')
                             .filter(function(){ return this.src.length == 0 })
                                 .each(function () { this.src = 'blank.jpg'})  });

EDIT:

I realized that you probably want to set the src property before the images load so I changed the code to fire on the document's load event, which happens before the images start loading.

Upvotes: 7

P M
P M

Reputation: 1

You can use this script.

# Script AddImage.txt
var string pagefile, image, html
# Read in the page file.
cat $pagefile > $html
# Replace all instances of "<img src="blank.jpg">" with the specified image.
while ( { sen -r -c "^<img src=&\>^" $html } > 0 )
    sal -r -c "^<img src=&\>^" ("<img src=\""+$image+"\">") $html > null
# Write page back.
echo $html > { echo $pagefile }

Script is in biterscripting. Save the script in file "C:/Scripts/AddImage.txt", run it with this command.

script "C:/Scripts/AddImage.txt" pagefile("/path/to/page.html") image("blank.jpg")

It will replace previous image with "blank.jpg".

Upvotes: 0

d4nt
d4nt

Reputation: 15799

With jQuery, this would set the src attribute of all img elements with a blank src attribute to "blank.jpg" on page load.

$.ready(function() {
  $("img[src='']").attr("src", "blank.jpg");
});

Upvotes: 2

advait
advait

Reputation: 6525

Use jQuery! It's easy.

$('img').attr('src','new-image-name.jpg')

This will set the src attribute of every img tag to 'new-image-name.jpg'.

Upvotes: 4

Related Questions