Question:

I am trying to render an image "<a href="https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg" rel="nofollow">https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg</a>" 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?

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

<blockquote>

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

</blockquote>

You may look into the stackoverflow answers for this error <a href="https://stackoverflow.com/questions/32755674/ios9-getting-error-an-ssl-error-has-occurred-and-a-secure-connection-to-the-ser/32854670" rel="nofollow">here</a>

I tried the first solution by changing

<blockquote>

info.plist

</blockquote>

with following configuration and it worked

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

Have a look into <a href="https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/" rel="nofollow">this</a> document, above approach is <strong><em>not recommended</em></strong>, instead they have suggested other way (it is also mentioned in the linked stackoverflow answer).

Hope this will help.