如何使用 Javascript 中的文件路徑切換圖像？

Question

我正在嘗試更改單擊按鈕時顯示的圖像。

 function change() { if (document.getElementById("toggle").src == "/folder/original.jpg") { document.getElementById("toggle").src = "/folder/new.jpg"; } else { document.getElementById("toggle").src = "/folder/original.jpg"; } }

 <button onclick="change()">Click</button> <img id="toggle" src="/folder/original.jpg">

我已經用 url 進行了嘗試，以檢查我的代碼是否有效。 使用文件路徑時，顯示的圖像是/folder/original.jpg但不會改變。 我檢查了元素，單擊button時沒有錯誤。 我還測試了/folder/new.jpg是否會呈現並且確實會呈現。 為什么我使用文件路徑時它不起作用？

Answer 1

您可以使用一些正則表達式來獲取文件名

 function change() { var imgSrc = document.getElementById("toggle").src; var filename = imgSrc.replace(/^.*[\\\/]/, ''); if (filename == "original.jpg") { document.getElementById("toggle").src = "/folder/new.jpg"; } else { document.getElementById("toggle").src = "/folder/original.jpg"; } console.log(filename); }

 <button onclick="change()">Click</button> <img id="toggle" src="/folder/original.jpg">

Answer 2

您正在檢查圖像的 src 屬性，這將是圖像的完整路徑，要使用檢查設置屬性的確切路徑，您必須檢查圖像屬性。

function change() {
  if (document.getElementById("toggle").getAttribute('src') == "/folder/original.jpg")
  {
    document.getElementById("toggle").setAttribute('src', "/folder/new.jpg");
  }
  else
  {
    document.getElementById("toggle").setAttribute('src', "/folder/original.jpg");
  }
}

Answer 3

更新：您可以檢查src值是否以路徑結尾。

function change() {
  const img = document.getElementById("toggle");
  if (img.src.replace(/\\/g, '/').endsWith('/folder/original.jpg')) {
    img.src = "/folder/new.jpg";
  } else {
    img.src = "/folder/original.jpg";
  }
}

<button onclick="change()">Click</button>
<img id="toggle" src="./folder/original.jpg">

如果實際的 src 是文件系統上的路徑，那么它在 WIndows 中將如下所示：

file:///C:\folder\original.jpg

您可以使用以下方法檢查它是否匹配：

 const src = 'file:///C:\\folder\\original.jpg'; const isEqual = src.replace(/\\/g, '/').endsWith('/folder/original.jpg'); console.log(isEqual); // true

---

下面是一個使用絕對路徑的例子：

 const images = [ 'http://placekitten.com/240/120', 'http://placekitten.com/200/120' ]; function change() { const img = document.getElementById('toggle'); let index = images.indexOf(img.src); if (index === -1) index = images.length - 1; const nextIndex = (images.length + index + 1) % images.length; img.src = images[nextIndex]; }

 body > button { display: block; }

 <button onclick="change()">Click</button> <img id="toggle" src="http://placekitten.com/240/120">