53252

HTTPS image not rendering in react native image

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?

Answer1:

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.

Recommend

  • Tail recursion with tasks?
  • recursive variadic template can't deduce argument
  • Custom binding(?) that adds some standard Knockout bindings to child nodes
  • Installing firefox extension for all users [system wide installation]
  • unable to remove blank option with ng-options
  • Non-generic interface as a synonym for generic one
  • dismissModalViewControllerAnimated shifts view down
  • Javascript array contains/includes sub array
  • How do I remove duplicates from an AutoHotkey array?
  • Python error: len() of unsized object while using statsmodels with one row of data
  • how to do mono to stereo conversion?
  • Change paused animation's play state to running on click of a link
  • Modify a Google App Engine entity id?
  • Java Garbage collection, setting reference to null
  • Android Google Maps API v2 start navigation
  • System.InvalidCastException: Specified cast is not valid
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Dialing with Intent.ACTION_CALL stopps at # in phone number
  • Counter field in MS Access, how to generate?
  • How to set/get protobuf's extension field in Go?
  • Javascript + PHP Encryption with pidCrypt
  • How to show dropdown in excel using jrxml (jasper api)?
  • Websockets service method fails during R startup
  • SetUp method failed while running tests from teamcity
  • Comma separated Values
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • How to get Windows thread pool to call class member function?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How can I remove ASP.NET Designer.cs files?
  • python draw pie shapes with colour filled
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • java string with new operator and a literal
  • How to load view controller without button in storyboard?