Javascript replacing image source - Stack Overflow

admin管理员组

文章数量:1305541

I am trying to change the contents of the src tag within a web page (without changing the HTML/naming structure)

My code looks something like this at the moment:

....

<div class="main">
    <button>
        <img src="image/placeHolder.png"/>
        <div>the nothing</div>
    </button>
</div>

....

I need to change the src of this img tag My javascript looks like this at the moment

....

<script type="text/javascript">

function changeSource() {

    var image = document.querySelectorAll("img");
    var source = image.getAttribute("src").replace("placeHolder.png", "01.png");
    image.setAttribute("src", source);
}

changeSource();

</script>

....

I have no idea why it isn't working but I'm hoping someone out there does :D

I am trying to change the contents of the src tag within a web page (without changing the HTML/naming structure)

My code looks something like this at the moment:

....

<div class="main">
    <button>
        <img src="image/placeHolder.png"/>
        <div>the nothing</div>
    </button>
</div>

....

I need to change the src of this img tag My javascript looks like this at the moment

....

<script type="text/javascript">

function changeSource() {

    var image = document.querySelectorAll("img");
    var source = image.getAttribute("src").replace("placeHolder.png", "01.png");
    image.setAttribute("src", source);
}

changeSource();

</script>

....

I have no idea why it isn't working but I'm hoping someone out there does :D

• javascript
• image
• class
• attributes
• edit

Share Improve this question Follow edited Mar 26, 2014 at 15:16 Brandon J. Boone 16.5k44 gold badges7676 silver badges102102 bronze badges asked Mar 26, 2014 at 15:13 TheLovelySausageTheLovelySausage 4,1241717 gold badges6565 silver badges116116 bronze badges 5

• what are these wings??? – ɹɐqʞɐ zoɹǝɟ Commented Mar 26, 2014 at 15:14
• by the way I used the ^ instead of </> because the editor kept turning it into HTML – TheLovelySausage Commented Mar 26, 2014 at 15:14
• 0_0 somehow my wings disappeared – TheLovelySausage Commented Mar 26, 2014 at 15:17
• There is a "Code Sample" button in the editor that you can use to format your code snippets. I updated your question and removed the wings. :) – Brandon J. Boone Commented Mar 26, 2014 at 15:18
• document.querySelectorAll() returns NodeList, you need to use querySelector or just access the first (or any other) element e.g. image[0]. – Ilya I Commented Mar 26, 2014 at 15:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Change your function to:

function changeSource() {
    var image = document.querySelectorAll("img")[0];
    var source = image.src = image.src.replace("placeholder.png","01.png");
}
changeSource();

querySelectorAll returns an array. I took the first one by doing [0].

But you should use document.getElementById('id of img here') to target a specific <img>

If you want to target all <img> that has placeholder.png.

function changeSourceAll() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        if (images[i].src.indexOf('placeholder.png') !== -1) {
            images[i].src = images[i].src.replace("placeholder.png", "01.png");
        }
    }
}
changeSourceAll();

function changeSource() {
   var img = document.getElementsByTagName('img')[0];
   img.setAttribute('src', img.getAttribute('src').replace("placeHolder.png", "image.png"));
}

本文标签： Javascript replacing image sourceStack Overflow