Question

我每次点击时都会尝试在两张图片之间切换。

我尝试创建一个首先使用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";
    }
}

我在这里做错了什么？

Answer 1

你可以这样做：

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");
    }
}

Answer 2

因为how it works：

HTMLImageElement.src是reflects src HTML属性的DOMString，包含图片的完整网址，包括基本URI。

请注意，此行为不仅限于本地文件。您可以尝试使用image.getAttribute("src") == "a.png"。

Answer 3

您可以使用此代码。

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="#" />

Answer 4

image.src的值file:///C:/Users...../a.png不仅仅是a.png。

Answer 5

听起来您已经确定了问题：您的image.src值是完整的文件路径，但您只是比较文件名和扩展名。而不是if (image.src == "a.png")尝试if (image.src.split('\\').pop().split('/').pop() == "a.png")。

Answer 6

在本地计算机上，图像的路径是什么？它是：

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

正如您的console.log所示。正如您的评论所指出的那样，您不会想要这样，因为这不会在网络服务器（或任何其他不是您的个人计算机）上工作。我们通常处理此问题的方法是指定路径，注意前导/：

<img src="/a.png">

这允许您将应用程序放在任何服务器上，并且它将正常工作（在Difference between Relative path and absolute path in javascript上阅读）在您的本地计算机上，您需要在服务器上运行您的项目。如果你碰巧使用Webstorm IDE，一个简单的方法是使用他们的内置服务器;你也可以使用像WAMP，XAMPP等的东西。

为什么image.src ==＆＃34; file.png＆＃34;用本地文件不返回true？

6 个答案: