Я пытаюсь переключаться между двумя изображениями каждый раз, когда на них нажимают.

Я попытался создать скрипт, который сначала получает изображение с var image = document.getElementById(id);, а затем проверяет, какое изображение в данный момент активно с if (image.src == "a.png"), но это никогда не возвращает true.

Когда я печатаю его с console.log(image.src), появляется весь источник:

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

Идея заключалась в том, чтобы иметь что-то вроде этого:

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

Что я здесь делаю не так?

0
user4307777 23 Фев 2018 в 23:19

6 ответов

Лучший ответ

Потому что как это работает:

HTMLImageElement.src - это строка DOMString, которая отражает HTML-атрибут src, содержащий полный URL-адрес изображения включая базовый URI.

Обратите внимание, что это поведение не ограничивается локальными файлами. Вы можете попробовать image.getAttribute("src") == "a.png" вместо этого.

1
Bergi 23 Фев 2018 в 20:28

Каков путь к изображению на вашем локальном компьютере? Это:

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

Как показывает ваш console.log. Как отмечается в вашем комментарии, вы этого не хотите, так как это не будет работать на веб-сервере (или где-либо еще, кроме вашего персонального компьютера). То, как мы обычно это делаем, указав пути как таковые, обратите внимание на начальный /:

<img src="/a.png">

Это позволяет вам разместить ваше приложение на любом сервере, и оно будет работать правильно (читайте на Разница между относительным и абсолютным путем в javascript) На локальном компьютере вам потребуется запустить проект на сервере. Простой способ сделать это, если вам случится использовать Webstorm IDE, это использовать их встроенный сервер; Вы также можете использовать что-то вроде WAMP, XAMPP и т. д.

0
KayakinKoder 23 Фев 2018 в 20:30

Вы можете сделать это следующим образом:

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");
    }
}
2
Piotr Białek 23 Фев 2018 в 20:25

Вы можете использовать этот код.

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="#" />
0
Harun Diluka Heshan 23 Фев 2018 в 20:25

Похоже, вы уже определили проблему: ваше значение image.src - это полный путь к файлу, но вы сравниваете только имя и расширение файла. Вместо if (image.src == "a.png") попробуйте if (image.src.split('\\').pop().split('/').pop() == "a.png").

0
hanoldaa 23 Фев 2018 в 20:26

image.src имеет значение file:///C:/Users...../a.png, а не просто a.png.

0
Björn Hjorth 23 Фев 2018 в 20:26