0

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?

Improve this question
12

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This works perfectly and I commend you for making sense of my horrible formatted URL
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
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?
Thanks a bunch Johan, you're a javascript blackbelt
I added one small change
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

Improve this answer

5 Comments

oww, just no ... client side requests should be an url, not relative path.
I am using this URL for testing purposes <img src="oecd.org/media/oecdorg/directorates/developmentcentre/…> just to make sure it works
it doesnt like the image tag in the comment oecd.org/media/oecdorg/directorates/developmentcentre/… there, just so you can see it's not a URL problem
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?
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
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

Improve this answer

9 Comments

The code is working for changing the img src it only stops working when the URL is beginning with www.
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
uri is invalid , please check it
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
Its only invalid because i put two full stops in the h.t.tp part, take those out and it will work
|
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>
Improve this answer

10 Comments

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?
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.
oh my god no wonder, I thought those were quotation marks ' instead of `
http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png
http://www.oecd.org/media/oecdorg/directorates/developmentcentre/Facebook-logo-34x34.png
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.