如何在JavaScript中获取图像的URL？

Question

我正在开发Chrome扩展程序，并且我正在为页面上的每个图片添加onmouseover处理程序。当用户将鼠标悬停在图像上时，它的URL应存储在变量中。我知道我可以很容易地获得图像的src属性的值，但我想要完整的URL。 src属性存储服务器上图像的路径。例如，当您右键点击Google Chrome中的图片时，您会获得“复制图片网址”＃34;选项，将图像的URL复制到剪贴板。

有没有办法实现这个目标？感谢。

Answer 1

使用imageElement.getAttribute("src")属性代替$("img.something").attr("src")或imageElement.src，而始终会为您提供完整的网址。

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

或：

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

提取主机名，路径名等 - 使用URL()构造函数解析网址，该构造函数适用于现代浏览器，或通过创建临时a节点使用旧方法。

Answer 2

您可以使用window.location获取您当前所在的页面，以下内容将为您提供所需的网址部分：

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

因此，您可能需要protocol，然后＆＃34; //＆＃34;，然后host，最后需要src。