Why does image.src == "file.png" not return true with local files?

Question

I'm trying to switch between two images every time they're clicked.

I've tried creating a script that first gets the image with var image = document.getElementById(id); and then checks which image is currently active with if (image.src == "a.png") but this never returns true.

When I print it with console.log(image.src) the whole source appears:

file:///C:/Users...../a.png

The idea was to have something like this:

var image = document.getElementById(id);
    if (image.src == "a.png") {
      image.src = "b.png";
    }
    else {
      image.src = "a.png";
    }
}

What am I doing wrong here?

Seems like you answered your own question. Is `file:///C:/Users...../a.png` equal to `a.png`? — j08691, Feb 23 '18 at 20:22
It should be, but I don't want to use the whole name, since that won't work if I move the folder around — , Feb 23 '18 at 20:24

score 2 · Answer 1 · answered Feb 23 '18 at 20:25

2

You can do it in this way:

var image = document.getElementById(id);
    if (image.src.includes("a.png")) {
      image.src = image.src.replace("a.png", "b.png");
    }
    else {
      image.src = image.src.replace("b.png", "a.png");
    }
}

answered Feb 23 '18 at 20:25

Piotr Białek

2,569
1
17
26

True, but I wouldn't use this in production. – KayakinKoder Feb 23 '18 at 20:27
It may be more appropriate to use **endsWith** instead of **includes** as the name of a file is always at the end of the string. It will also avoids frequently problems with OS file rename. For example a file called "a.png.txt" would match with includes, but not using endsWith – Rod Ferreira Feb 23 '18 at 20:30
@RodFerreira endsWith would also match "aa.png", which is also incorrect. Neither *endsWith* nor *includes* are solid options. Correct use of paths is the right way to do this. – KayakinKoder Feb 23 '18 at 20:33
You are absolutely right @KayakinKoder. It would be better to get a substring based on the last slash character index and test it against the file name – Rod Ferreira Feb 23 '18 at 20:39

score 1 · Accepted Answer · answered Feb 23 '18 at 20:28

Because that's how it works:

HTMLImageElement.src is a DOMString that reflects the src HTML attribute, containing the full URL of the image including base URI.

Notice that this behaviour is not restricted to local files. You can try image.getAttribute("src") == "a.png" instead.

score 0 · Answer 3 · answered Feb 23 '18 at 20:25

0

You may use this code.

var image = document.getElementById("img");
    if (image.src.indexOf("b.png") > -1) {
      image.src = "b.png";
    }
    else {
      image.src = "a.png";
    }
}

<img id="img" src="#" />

answered Feb 23 '18 at 20:25

Harun Diluka Heshan

1,155
2
18
30

score 0 · Answer 4 · answered Feb 23 '18 at 20:26

0

The image.src has the value file:///C:/Users...../a.png not just a.png.

answered Feb 23 '18 at 20:26

Björn Hjorth

2,459
5
25
31

score 0 · Answer 5 · answered Feb 23 '18 at 20:26

0

It sounds like you've already identified the problem: your image.src value is the full file path, but you're only comparing the file name and extension. Instead of if (image.src == "a.png") try if (image.src.split('\\').pop().split('/').pop() == "a.png").

answered Feb 23 '18 at 20:26

hanoldaa

616
5
10

I feel like that's just a complicated workaround of something that should be a bit more simple – Feb 23 '18 at 20:46

score 0 · Answer 6 · answered Feb 23 '18 at 20:30

0

On your local computer, what is the path to the image? It is:

file:///C:/Users/Myntekt/Whatever.../a.png

as your console.log shows. As your comment noted, you don't want this though, as this won't work on a webserver (or anywhere else that is not your personal computer). The way we typically handle this is by specifying paths as such, notice the leading /:

<img src="/a.png">

This allows you to put your app on any server, and it will work correctly (read up on Difference between Relative path and absolute path in javascript) On your local computer, you'll then need to run your project on a server. An easy way to do this if you happen to use Webstorm IDE is use their built in server; you can also use something like WAMP, XAMPP, etc.

answered Feb 23 '18 at 20:30

KayakinKoder

3,243
3
23
37

I tried that, but with the / the image just doesn't load in the first place and a missing image thing appears in its place – Feb 23 '18 at 20:43
@Myntekt yes you'll need to run your project on a "server", you can't just open your .html files in your browser like normal. It may take you a few hours to figure out how to do that, but it'll make your life 100% easier. Check out http://www.wampserver.com/en/ It allows you to create an actual Apache server on your computer that you can then run your project on. Another option is using an IDE like WebStorm, which can create a server for you. This makes your development environment much more like your production environment. Further down the road, take a look at something called Docker. – KayakinKoder Feb 23 '18 at 20:46
I actually have the files on my university's server but I'm just changing some things on my own PC right now. I'll try it out later on, thanks! – Feb 23 '18 at 20:57

Why does image.src == "file.png" not return true with local files?

6 Answers6