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开发者_JAVA技巧 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

---

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).

---

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.

---

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'.

---

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");
});

---

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".

---

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

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

---

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"
            }
        }