1

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?

Mojtaba Moshfeghi far
  • 571
  • 1
  • 5
  • 20
jkurs
  • 105
  • 2
  • 12

2 Answers2

3

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.

Prasun
  • 4,943
  • 2
  • 21
  • 23
  • No error, the picture just does not appear. Were you able to get it to work with that configuration? – jkurs Nov 17 '17 at 04:40
  • have u tried with `onError` handler callback and check the error on console? – Prasun Nov 17 '17 at 04:41
  • 1
    Try like this ` console.log(e.nativeEvent.error) } style={{height: 200, width: 200}} source={{uri:'https://www.edamam.com/web-img/22c/22c27bdc6b8dc67215c7478cb4e5dc42.jpg'}}/>` to get the error. Also re-build ur app after changing info.plist. – Prasun Nov 17 '17 at 04:52
  • I got An SSL error has occurred and a secure connection to the server cannot be made. – jkurs Nov 17 '17 at 05:22
  • Yes, the same error that I got, then I changed the info.plist and re-start the npm server with cache reset, then re deploy the app and it worked. Did u redeployed the apo? – Prasun Nov 17 '17 at 05:27
  • I did a clean in xcode and then a build + deployed, but i can try again with resetting the simulator. – jkurs Nov 17 '17 at 05:58
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/159200/discussion-between-prasun-pal-and-jkurs). – Prasun Nov 17 '17 at 05:59
0

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!

Ash
  • 1
  • 4