如何在JavaScript中獲取圖像的URL？

Question

我正在開發Chrome擴展程序，我正在為頁面上的每個圖像添加一個onmouseover處理程序。 當用戶將鼠標懸停在圖像上時，它的URL應存儲在變量中。 我知道我可以很容易地獲得圖像的src屬性的值，但我想要完整的URL。 src屬性存儲服務器上圖像的路徑。 例如，右鍵單擊Google Chrome中的圖片時，您會看到“復制圖片網址”選項，該圖片會將圖片的網址復制到剪貼板。

有沒有辦法實現這個目標？ 謝謝。

Answer 1

而不是imageElement.getAttribute("src")或$("img.something").attr("src") ，它讀取原始標記，使用imageElement.src屬性，它將始終為您提供完整的URL。

var imgFullURL = document.querySelector('img.something').src;

要么：

var imgFullURL = $('img.something')[0].src;

要提取的主機名，路徑名等-解析與URL URL()構造函數，這在現代瀏覽器上運行，或通過創建一個臨時使用傳統的方法a節點。

Answer 2

您可以使用window.location獲取當前所在的頁面，以下內容將為您提供所需的URL部分：

window.location.protocol = "http:"
window.location.host = "stackoverflow.com"
window.location.pathname = "/questions/32828681/how-to-get-url-of-an-image-in-javascript"

所以，很可能，你需要protocol ，然后是“//”，然后是host ，最后是圖像src 。