Why does <Image> use CSS background-image and <img>?

[okwast]

Hey there 👋

First of all thank you for all the effort here.
In our company we have a React Native app and a React web frontend and finally we tried React Native for Web on the first feature and it works really great 👍

But we discovered one thing, I couldn't quite find the reason for:
If I add an <Image source={{uri: ...}} /> the result contains a div with a background image in the styles and an actual img tag.
Probably there is a good reason for this and I'm curious what that reason could be.

If anyone could give a short explanation that would make a curious man happy 🙂

Thanks in advance.

[intergalacticspacehighway]

@okwast I think this is done to support resizeMode property. img tag is added for accessibility reasons. It renders on top of the background image, so we can get the alt attribute and browsers can show the image context menu.

// Accessibility image allows users to trigger the browser's image context menu

Found the above comment in the source code 😅

[okwast]

Hey @intergalacticspacehighway sorry for the late reaction. Yeah, that makes a lot of sense.
Especially after I realized the img-tag has opacity set to 0 so it isn't visible.
At first I was pretty confused how the div could have any effect, when it is overlayed with an img, but the img is invisible 😄

Thank you for the answer 🙏