Detecting srcset source or image source using JavaScript

When you use srcset as follows:

<img src="example-src.jpg" srcset="example-1x.jpg 1x, example-2x.jpg 2x" /> 

Or using an image tag, for example:

 <picture> <source media="(min-width: 64em)" src="high-res.jpg"> <source media="(min-width: 37.5em)" src="med-res.jpg"> <source src="low-res.jpg"> <img src="fallback.jpg" /> </picture> 

Can I find out which URL the browser decided to use? Checking the src attribute of the <img> tag alone does not tell you which image was uploaded.

(Sorry if this is a duplicate. I cannot find a solution anywhere.)

+5
source share
2 answers

You can use currentSrc in at least some browsers (although I don't know which one.)

 document.getElementById('myImage').currentSrc; 

Or...

 jQuery('#myImage').prop('currentSrc'); 
+6
source

At the moment, this is not possible, as far as I know. I applied the use case / function ("3.10 Managing the source exchange between breakpoints") for something almost the same as for RICG. Therefore, I hope that it is still under development. But, unfortunately, this is not something that can be accessed at the moment.

-1
source

Source: https://habr.com/ru/post/1243702/


All Articles