Check what image was loaded in HTML picture element

user_6694825 0
Viewed 565

I have following code in my app: 

<picture>
    <source media="(max-width: 1300px)" srcSet={src.img['1']} />
    <source media="(max-width: 1599px)" srcSet={src.img['2']} />
    <source media="(max-width: 2049px)" srcSet={src.img['3']} />
</picture>

is it possible programmatically to check which of these images was loaded by browser in picture element? I have to use that image once again (now I use img['1'] by default in tooltip) but I want to avoid loading image one more time.

css html javascript
1 Answers

Normally I just open the console and then put this code in there.

console.log( img.src )

Remember that although you may use modern images like WebP with a JPG fallback, if WebP is supported it will not fall back.

Also you need to choose the element first or you will get image undefined.

user_20407060
Related