Why is the Image component a div with a css background-image?

I was wondering why my styles weren’t applying correctly to an image component and inspected the DOM only to realise that the asset is actually hidden and instead the containing div is a container with a css background-image property.
Why is it like this? Background-image has scaling and blurriness impacts and it takes the image out of the flow of DOM elements. Just wondering if it’s possible to rectify or use the default element?

Hi! Not sure about the div stuff but I assume it has something to do with how React Native prefers to do images – but what were the styles that you were unable to get to apply correctly?

Thanks for the reply! I was unable to get the image to have rounded borders. I have the image set to ‘contain’ so that it can stay within some defined max-width and max-height properties.

Since it’s actually an image within a div, the rounded borders get applied to the div but not the image. If I set the image to ‘cover’ I can see the rounded borders again, but then of course my image would get cut off because of the max-height rules I’ve defined.

Interesting about how React Native interprets images but I suppose it makes sense.

Thanks again,

:thinking: Rounding an image should be easy enough though? Not sure about your specific case, but I tried the following setup and the image got fully rounded corners as expected, how does your setup look?

Screenshot 2022-04-26 at 14.56.30

Hmm, I had another play - thanks for looking into it for me & you gave me some ideas.

The issue I had is that some of the images come in from my API call too small, and others come in too large. But I need to scale them to a min or a max height whilst allowing the width to be freeform so it doesn’t distort, but at the same time if the image is (occasionally) a horizontal image - it doesn’t go to the full min-height, it would be constrained by the max-width.


This is my current combination that seemed to at least keep the image inside the container at least.

I think what you made me realise though is that the issue isn’t so much the image having a rounded border, it’s keeping them all the right size. So that when some of them have to be resized according to the source, a rounded border would just make things look awkward.

Extreme scenario being if majority are portrait images it’s better to have a max-height and the widths mostly just freeform and then if that were the case I could have rounded borders & it’d be okay. Some images may be skinnier than others but overall okay. But then I get the occasional horizontal image. I could let it stretch to the height of the portraits but then it’d be comparatively massive. Otherwise I could constrain to max-width but then the height would need to be smaller, which means a rounded border would look wrong.

tldr;
Too hard cos of source images being too inconsistent - just gonna go with no rounding for this one.

Thanks again :slight_smile: