Javascript图像转换器：MDN Javascript基础知识

Question

我浏览了Mozilla开发者网络上的网站开发指南，在JS basics section中，我看到了这个例子：

var myImage = document.querySelector('img');

myImage.onclick = function() {
    var mySrc = myImage.getAttribute('src');
    if(mySrc === 'images/firefox-icon.png') {
      myImage.setAttribute ('src','images/firefox2.png');
    } else {
      myImage.setAttribute ('src','images/firefox-icon.png');
    }
}

当我计算出这个例子时，虽然它确实按预期执行，但我对图像路径有疑问。这是我的文件结构：

我的问题是：在处理html中的图片时，如果当前的.html文件位于名为pages的文件夹中，与其他同级文件夹一起作为images，{{ 1}}等，在这种情况下，我要遵循的文件结构是：scripts。 ../images/filename.jpg将用于从..文件夹到达主（根）文件夹，然后从那里访问pages文件夹。

如果没有使用images，此图像转换器示例如何工作？此处的文件..位于根目录的子文件夹中。

Answer 1

  

这个图像转换器示例如何工作，没有..是   使用

它的工作原理是因为js文件并不是独立存在的，它包含在HTML文件中，并且该HTML文件恰好位于根文件夹中。

Answer 2

JavaScript正在将新图像路径添加到html页面上的<img>节点。它所做的只是在页面上插入一些信息，它对图像一无所知。

浏览器看到DOM上的某些内容已更改，因此它会读取新的src属性，下载图像并重新绘制。

当路径写入html页面时，它相对于该页面的位置。 JS插入它并不重要。