Fallback image is always selected in inspector tools

[notflip]

I'm not sure if the package is incorrectly setup, or if this is normal chrome inspector behaviour, but the fallback image is always selected, at any size.

Does anyone know what is up here?

[ncla]

It is probably because your media attribute is empty for each <source>, it should have the breakpoint queries (something like min-width: 1280px for example).

[notflip]

I mean the image tag src image, thanks!

[ncla]

How do you verify what image was loaded by browser? You should look at devtool network requests and check URLs.

[notflip]

I'll check it out thanks, might be the inspector that is not highlighting the correct source tag that's being used

[ncla]

Slow day for me.. but I think I understood you now finally. If you right click on web page and inspect element, then yes, the focused element being <img> is normal. The focused element does not equate to which source or image was loaded.

The reason it does not focus on <picture> may be to do with how it behaves:

the picture element itself does not display anything; it merely provides a context for its contained img element that enables it to choose from multiple URLs.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

[notflip]

Thanks @ncla, you're absolutely right, in the network tab, and while testing with crop modes I can see the image changing, lovely! This package is amazing. Thank you.