How to get URL of an image in JavaScript?

Question

I'm developing a Chrome extension, and I'm adding an onmouseover handler to each of the images on a page. When the user mouses over an image, it's URL should be stored in a variable. I know I can easily get the value of the src attribute of the image, but I want the full URL. The src attribute stores the path of the image on the server. For example, when you right click an image in Google Chrome, you get the "Copy Image URL" option, which copies the image's URL to the clipboard.

Is there any way to achieve this? Thanks.

Answer 1

So the TL;DR is this:

(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;
    }
  })
})();

See CodePen:

How to find the src URL for a photo by Trevor Rapp on CodePen

This is how I thought about solving the problem in the most basic steps:

1. get the function to fire.
2. get the function to add an event listener that will perform an action on a mouseover event.
3. make that action know what the mouse is currently over.
4. figure out if what the mouse is currently over is an image or not.
5. create logic that will respond if it is.
6. that action that logic should do is return the source URL.
7. I will need to store that source URL if I am going to have to return it.

Here are how each of those solutions looked:

1. get the function to fire.

An IFFE is a great way to get a function to fire without having to worry about polluting the name space.

//skeleton for an IFFE statement

(function() {

})();

2. get the function to add an event listener that will perform an action on a mouseover event.

An event listener that could fire anywhere would have to be attached to the window or the document.

3. make that action know what the mouse is currently over.

This part will be combined with part 2. Event listener's first parameter is what type of event you want to listen for -- in this case 'mouseover. So now our code looks like this

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

4. figure out if what the mouse is currently over is an image or not.

*To figure out which element the mouse if currently over you would use Event.target. The MDN definition for that is: *

The target property of the Event interface is a reference to the object onto which the event was dispatched. It is different from Event.currentTarget when the event handler is called during the bubbling or capturing phase of the event. --Event.Target

*So the code would then look like this: *

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

  }
})()

5. create logic that will respond if it is.

This was a little trickier since a photo or IMG can be presented in various ways. I chose to create a solution for the simplest way, which is assuming that the web developer used the more syntactically correct version of an tag. However, there are many times when they may choose to apply a 'background-image' CSS property to a normal . Other things to consider could be the use of iframes, which can make detecting the attributes of child elements very frustrating since they don't allow bubbling to occur. To tell if an element is an , you can simply use elem.tagName === "IMG" for your logic check. While not included in the above code, if you wanted to check if a div is using the 'background-image', you could use something like element.getAttribute('style').includes('term') and switch out 'term' for something like 'url' or 'jpg' or 'png.' Kind of clunky and hacky, but just a thought. Anyway, the code would then become

(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. that action that logic should do is return the source URL.

Once you get the logic done and you have properly selected the element, then you can use element.src to get the source URL.

7. I will need to store that source URL if I am going to have to return it.

You can do this anyway you want, but I played around with instantiating an object since it sounded like the value would need to change often, but you didn't necessarily need to store previous values.

And so the final product could be something like this

(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;
    }
  })
})();

Answer 2

Instead of imageElement.getAttribute("src") or $("img.something").attr("src"), which reads the original markup, use imageElement.src property which will always give you the full URL.

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

or:

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

To extract host name, path name etc. - parse the url with URL() constructor, which works in modern browsers or use the legacy method via creating a temporary a node.

Answer 3

You can use window.location to get the page you are currently on and the following will give you the URL parts you need:

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

So, likely, you will need protocol, then "//", then host and finally the image src.