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

Question

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

有没有办法实现这个功能呢？谢谢。

- bool3max

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 节点使用传统方法。

- wOxxOm

---

谢谢！我不知道 src 属性。 - undefined

是的，据我所知，每个HTML属性都映射到一个DOM属性，其中包含原始标记属性的处理值。 - undefined

Answer 2

所以简而言之：

(function() {

  const imageInfo = new Object();
  imageInfo.source = '';

  window.addEventListener('mouseover', function (event) {
    var currentElement = event.target;
    // console.log(event.target);
    if (currentElement.tagName === 'IMG') {
      // console.log(currentElement.outerHTML + "is a photo");
      imageInfo.source = currentElement.src;
      // console.log("src is :" + imageInfo.source)
      return imageInfo.source;
    }
  })
})();

请查看 CodePen：

如何查找照片的 src URL，由 Trevor Rapp 在 CodePen 上分享

这是我考虑解决问题的基本步骤：

1. 使函数触发。
2. 让该函数添加一个事件侦听器，在鼠标悬停事件上执行操作。
3. 使该操作知道鼠标当前指向的是什么。
4. 弄清楚当前鼠标指向的是图像还是其他东西。
5. 创建可响应图像的逻辑。
6. 该逻辑的操作应该返回源 URL。
7. 如果我需要返回源 URL，我需要储存它。

以下是每个解决方案的实现方式：

1. 使函数触发。

IFFE是一种很好的方式，可以让函数触发而不必担心污染命名空间。

//skeleton for an IFFE statement

(function() {

})();

2. 获取添加事件监听器的函数，该函数将在鼠标悬停事件上执行操作。

一个可以在任何地方触发的事件监听器必须附加到窗口或文档。

3. 让该操作知道鼠标当前所在位置。

这部分将与第二部分合并。事件监听器的第一个参数是您要监听的事件类型--在本例中为“mouseover”。因此，现在我们的代码看起来像这样：

(function () {
  window.addEventListener('mouseover', function (event) {
  //do stuff here
  }
})()

确定鼠标当前指向的是图像还是其他元素。

*要确定鼠标当前指向的是哪个元素，可以使用事件目标Event.target。MDN对其定义如下：*

Event接口的target属性是一个引用，指向分派事件的对象。当事件处理程序在事件的冒泡或捕获阶段中被调用时，它与Event.currentTarget不同。--Event.Target

*因此代码应该如下所示：*

(function () {
  window.addEventListener('mouseover', function (event) {
  //get the current element the mouse is over
  var currentElement = event.target;

  }
})()

创建一个逻辑，以响应是否为图片。

这有点棘手，因为照片或IMG可以以多种方式呈现。 我选择为最简单的方式创建解决方案，即假设Web开发人员使用了更语法上正确的版本的标记。然而，有很多时候他们可能会选择将“background-image”CSS属性应用于普通div。其他要考虑的事情可能是使用iframes，它们可以使检测子元素的属性非常令人沮丧，因为它们不允许冒泡发生。要确定一个元素是否为图片，您只需使用elem.tagName ===“IMG”进行逻辑检查。虽然未包含在上述代码中，但如果您想检查一个div是否正在使用'background-image'，您可以使用类似element.getAttribute（'style'）。includes('term')的东西，并将'term'替换为像'url'或'jpg'或'png'之类的东西。有点笨拙和hacky，但只是一种想法。无论如何，代码将变为

(function () {
  window.addEventListener('mouseover', function (event) {
  //get the current element the mouse is over
  var currentElement = event.target;
        if (currentElement.tagName === 'IMG') {
           //do stuff
    }
  }
})()

6. 逻辑应该执行的操作是返回源URL。

一旦您完成了逻辑并正确选择了元素，那么您可以使用element.src来获取源URL。

7. 如果我需要返回它，我将需要存储该源URL。

您可以按任何方式执行此操作，但我尝试过实例化对象，因为听起来值可能需要经常更改，但您不一定需要存储先前的值。

因此，最终产品可能类似于此：

(function() {

  const imageInfo = new Object();
  imageInfo.source = '';

  window.addEventListener('mouseover', function (event) {
    var currentElement = event.target;
    // console.log(event.target);
    if (currentElement.tagName === 'IMG') {
      // console.log(currentElement.outerHTML + "is a photo");
      imageInfo.source = currentElement.src;
      // console.log("src is :" + imageInfo.source)
      return imageInfo.source;
    }
  })
})();

- trrapp

Answer 3

你可以使用 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)。

- amklose

---

那并没有回答问题。 - undefined

嗯，你想要回答的问题是什么？我相当确定这回答了楼主的问题。 - undefined

问题是关于图像元素的URL。你的回答是关于页面的URL。你回答中唯一相关的词是src，但是甚至不清楚你打算如何使用它。 - undefined

你的答案在某些情况下可能不起作用，比如原始的src属性中有一个完整的URL。所以如果你喜欢你绕弯子的方式来完成这个任务，你可能想要添加一个处理这种情况的示例，或者至少提到一下。而且你还需要处理相对路径的情况，例如src="image.png"和src="/images/someimage.png" :-) - undefined

我同意wOxxOm的观点 - 这个答案完全错误。它需要更多的工作才能正确解决问题。 - undefined