Question

我有这个小测试文件，当图像在服务器上时工作正常。但是当我的电脑上的图像是本地图像时，它不起作用。（.html和图片在同一文件夹中）

<img alt="" src="http://www.mywebsite.nl/images/markwhite.png" id="imgClickAndChange" onclick="changeImage()"  />

<script>

 function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "http://www.mywebsite.nl/images/markwhite.png") 
    {
        document.getElementById("imgClickAndChange").src = "http://www.mywebsite.nl/images/markgreen.png";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "http://www.mywebsite.nl/images/markwhite.png";
    }
} 
</script>

因此，当我在桌面上进行本地测试时，它无效。有人可以解释一下吗？

<img alt="" src="markwhite.png" id="imgClickAndChange" onclick="changeImage()"  />

<script>

function changeImage() {

    if (document.getElementById("imgClickAndChange").src == "markwhite.png") 
    {
        document.getElementById("imgClickAndChange").src = "markgreen.png";
    }
    else 
    {
        document.getElementById("imgClickAndChange").src = "markwhite.png";
    }
}
</script>

Answer 1

问题

您要求的是图片的实际完整URI，而不是src标签本身的attribute image中存储的值。

它适用于您的第一个（服务器端）示例，因为URI的值和src属性中的值恰好相同。

在你的第一个例子中：

src="http://www.mywebsite.nl/images/markwhite.png"

URI和src attribute都是：http://www.mywebsite.nl/images/markwhite.png。

然而，在你的第二个例子中：

src="markwhite.png"

源（URI）不只是文件名markwhite.png，而是文件系统的完整路径。例如，在Unix上：/home/user/me/photos/markwhite.png或在Windows上：c:\web\photos\markwhite.png。

您可以通过添加一些调试来简单地验证这一点。在JavaScript中添加一个简单的console.log：

   function changeImage() {
      if (document.getElementById("imgClickAndChange").src == "markwhite.png") 
        console.log(document.getElementById("imgClickAndChange").src);
       {
         document.getElementById("imgClickAndChange").src = "markgreen.png";
       }
      else 
       {
         document.getElementById("imgClickAndChange").src = "markwhite.png";
       }
  }

行：

console.log(document.getElementById("imgClickAndChange").src);

将完整的源输出到您的浏览器JavaScript控制台。即使是简单的alert，也不是console.log，也足够了：

alert(document.getElementById("imgClickAndChange").src);

解决方案

您所寻找的只是源属性的价值，而不是完整的源本身。如果您只希望获得vanilla JavaScript中元素的属性，可以使用getAttribute getter。在您的情况下，请将.src更改为.getAttribute('src')。

因此，这个改变过的脚本可以解决这个问题：

   function changeImage() {
      if (document.getElementById("imgClickAndChange").getAttribute(src) == "markwhite.png") 
       {
         document.getElementById("imgClickAndChange").src = "markgreen.png";
       }
      else 
       {
         document.getElementById("imgClickAndChange").src = "markwhite.png";
       }
  }

为什么更改图像onclick不能在PC上本地工作？

1 个答案:

问题

解决方案