JavaScript replace img src with External src

Question

I'm having a strange problem that I can't quite figure out.

I have a normal image on a web page

<img src="images/logo.png"/>    <!-- getting image from root directory -->

and I have some javascript code to replace the image source

function imageUpdate() {
    var image = document.querySelectorAll("img");
    for (var num = 0; num < image.length; image++)
        image[num].src = image[num].src.replace("images/pic01.png", "images/other/pic02.png")
}

This code works fine which is great although it seems to fall down as soon as the src I want it replaced to is outside of my root directory such as "http://www.servername.com/pic03.png" // (this is an imaginary URL don't try to click it).

is there a reason this happens? is there a way around this?

I have tried it with the following URL http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png — TheLovelySausage, Mar 28 '14 at 07:02
it looks like it takes out the http://www. inside the comment section but it's definitely there in my code — TheLovelySausage, Mar 28 '14 at 07:03
I recognize that, but did you add the protocol in my previous comment? So it would be: `http://www.oecd.org...` — KevBot, Mar 28 '14 at 07:04
[link]http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png — TheLovelySausage, Mar 28 '14 at 07:07
sorry Im battling to format what I type in the comment section — TheLovelySausage, Mar 28 '14 at 07:07
Put tick marks around your code instead, these things here: \` — KevBot, Mar 28 '14 at 07:09
'http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-‌34x34.png' — TheLovelySausage, Mar 28 '14 at 07:23
[link](http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-‌34x34.png) — TheLovelySausage, Mar 28 '14 at 07:24

Johan · Answer 1 · 2014-03-28T08:44:14.387

1

The problem is that you are only replacing the last part of your original src. The src of the img tag first looks like this:

"http://yourserver.com/images/pic01.png"

...and after replacing "images/pic01.png" with you external URL, it looks like this:

"http://yourserver.com/http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png"

To avoid this problem you can try this:

function imageUpdate() {
    var image = document.querySelectorAll("img");
    for (var num = 0; num < image.length; num++) {
        if (stringEndsWith(image[num].src, "images/pic01.png")) {
            image[num].src = "http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png";
        }
    }
}

function stringEndsWith(string, suffix) {
    return string.indexOf(suffix, string.length - suffix.length) !== -1
}

There's also an error in your for loop, where you are incrementing image instead of num

Step-by-step explanation

imageUpdate()
Loop through each img tag and look at the src attribute
If src ends with "images/pic01.png" replace all of src with the new url

stringEndsWith()
Find index of given suffix (start looking for the suffix at the last possible position the suffix can be located at)
If this index is found (is different from -1) return true, else return false

edited Mar 28 '14 at 08:44

answered Mar 28 '14 at 07:42

Johan

1,016
7
13

This works perfectly and I commend you for making sense of my horrible formatted URL – TheLovelySausage Mar 28 '14 at 07:52
oh i didn't see the image++ increment (that is just me being an idiot) it isn't like that in my code, my bad – TheLovelySausage Mar 28 '14 at 07:58
The more I read this code the more it impresses (and confuses) me. I'm very grateful that it works but I hate using a code that I do not understand, can I be a complete noob and ask you to go through it for me? – TheLovelySausage Mar 28 '14 at 08:03
Thanks a bunch Johan, you're a javascript blackbelt – TheLovelySausage Mar 28 '14 at 09:01
I added one small change – TheLovelySausage Mar 28 '14 at 09:53

score 0 · Answer 2 · answered Mar 28 '14 at 06:55

0

What target url are you assigning to it? Make sure that it is pointing to an absolute address (keep the http:// part at the beginning).

If the file is in the same server, you can still use relative file paths, and go up a parent folder by using two dots. For instance: ../someotherfolder/pic03.jpg

answered Mar 28 '14 at 06:55

Chuck Cerrillo

1
2

oww, just no ... client side requests should be an url, not relative path. – KarelG Mar 28 '14 at 06:57
I am using this URL for testing purposes just to make sure it works – TheLovelySausage Mar 28 '14 at 06:59
it doesnt like the image tag in the comment http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png there, just so you can see it's not a URL problem – TheLovelySausage Mar 28 '14 at 07:00
in your earlier comment with the img tag, you didn't include http://, so is it possible that you're not using a well-formed url in the other code? – Chuck Cerrillo Mar 28 '14 at 07:03
im using this URL -- h.t.tp://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png // I added the fullstops coz the comment section keeps formatting that part out – TheLovelySausage Mar 28 '14 at 07:14

Dimag Kharab · Answer 3 · 2014-03-28T07:27:00.073

0

<script>

function imageUpdate() {

    document.getElementById('imageT').src = 'test.jpg';

}

</script>

<img id='imageT' src="images/logo.png"/>    <!-- getting image from root directory -->

JS Fiddle-Demo

edited Mar 28 '14 at 07:27

answered Mar 28 '14 at 07:02

Dimag Kharab

4,439
1
24
45

The code is working for changing the img src it only stops working when the URL is beginning with http://www. – TheLovelySausage Mar 28 '14 at 07:05
Im using this URL h.t.tp://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png // i added random fullstops coz the comment section keeps formatting out that part – TheLovelySausage Mar 28 '14 at 07:12
uri is invalid , please check it – Dimag Kharab Mar 28 '14 at 07:16
any way the URL is right it works everywhere except when it is being replaced, it will show up as the "x" when an image URL is wrong although the URL is right I just dont know if the javascript is putting it into source as a string and not a URL or something like that – TheLovelySausage Mar 28 '14 at 07:17
Its only invalid because i put two full stops in the h.t.tp part, take those out and it will work – TheLovelySausage Mar 28 '14 at 07:18
sorry you were right the one in the comment is wrong, sorry this comment formatting is killing me, how do i keep it from formatting my comments? – TheLovelySausage Mar 28 '14 at 07:21
I added a plus sign -> h+ttp://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png – TheLovelySausage Mar 28 '14 at 07:21
A slightly modified jsfiddle demo i provided , please check – Dimag Kharab Mar 28 '14 at 07:27
your code works nicely but not in this situation but this is a nice quick way to change other sources that I can use, thanks a bunch – TheLovelySausage Mar 28 '14 at 08:36

score 0 · Answer 4 · answered Mar 28 '14 at 07:29

0

There is an error in the link you are trying to use. The actual link should be:

http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png

Here is come code to demonstrate:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script>
function changeImage() {
    document.getElementById('changeThis').src = 'http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png'
}
</script>
</head>
<body>
<img id="changeThis" src="http://www.wartburgseminary.edu/uploadedImages/Resources/small-twitter-icon.jpg">
<input type="button" value="Change" onClick="changeImage()">
</body>
</html>

answered Mar 28 '14 at 07:29

KevBot

17,900
5
50
68

the formatting in the comment section keeps breaking my link, how do I write a url in the comment section that will not get formatted? – TheLovelySausage Mar 28 '14 at 07:35
When trying to show the code for a link, do not use \[\]\(\) syntax, that will actually create a link. Instead, to make "code" use these marks \` around code. Also, when you are creating a comment, there is a help link next to the comment box. That will tell you all you need to know. – KevBot Mar 28 '14 at 07:38
oh my god no wonder, I thought those were quotation marks ' instead of ` – TheLovelySausage Mar 28 '14 at 07:42
`http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png` – TheLovelySausage Mar 28 '14 at 07:42
`http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png` – TheLovelySausage Mar 28 '14 at 07:43
Haha, it's all good. Anyways, if you took the above code and ran it, it works just fine. – KevBot Mar 28 '14 at 07:43
`http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png` – TheLovelySausage Mar 28 '14 at 07:43
sorry I'm battling with getting what I want into the comment section but just trust me the URL is right XD just a quick question but do you know why it wouldn't work with the javascript in my question? – TheLovelySausage Mar 28 '14 at 07:45
Try this. If you copy paste the link you just put two comments above and enter it into the browser. You will be sent to a "page not found" page. There is something wrong with your link. However, if you take the link I provided in my answer, and copy paste that into a browser, it takes you to the icon you want. – KevBot Mar 28 '14 at 07:47
yeah the comment section is adding spaces (I have no idea why) where it goes on to a new line, the link is right but it is breaking in the comment section – TheLovelySausage Mar 28 '14 at 07:50

JavaScript replace img src with External src

4 Answers4