HTTPS image not rendering in react native image

Question

I am trying to render an image " https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg " which works fine in a web browser, but in a react-native image the image does not appear.

I am attempting to do :

 <Image
style={{ height: 200, width: 200 }}
source={{
    uri:
        "https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg"
}}
/>;

This also does not work:

 <Image
style={{ flex: 1, resizeMode: "cover" }}
source={{
    uri:
        "https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg"
}}
/>;

What am I doing incorrectly here?

Answer 1

I tried your code, initially I did not get the image, then I handle the error using onError handler and found the following error

An SSL error has occurred and a secure connection to the server cannot be made

You may look into the stackoverflow answers for this error here

I tried the first solution by changing

info.plist

with following configuration and it worked

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

Have a look into this document, above approach is not recommended , instead they have suggested other way (it is also mentioned in the linked stackoverflow answer).

Hope this will help.

Answer 2

For anyone who thinks this is not a HTTPS issue, also check that your image is not a webp image.

Even if the title of the image says it's a .png or .jpg, try to save the image. If it says Google's WebP then you'll need to convert the image into a React Native friendly image file type.

Hope this helps!