Search code examples
iosimagereact-nativeios-simulator

I'm not able to get images to load into an Image component

Hi i'm new to JS and React Native. I cannot seem to get any images to load into the Image component. Im using all secure uri's and testing them in a browser first. they load in a browser but not in my ios simulator. there also seems to be no errors. Hoping someone has seen this before

here's a code extract : 

<Image    
      source = { {uri:"https://images.freeimages.com/images/large-previews/f37/cloudy-scotland-1392088.jpg" }}
      resizeMode = {"contain"}
      onLoadStart = { () => alert("start")}
      onLoadEnd = { () => alert("loaded") }
      onError = {(e)=> alert(e.nativeEvent.error)}
    />

info.plist extract:

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

  • I think the issue is with you haven't given any style for Image component. Image width and height need to be added to Image styles in order to display it on the device. More

    Try This

    <Image
  source={{
    uri:
      "https://images.freeimages.com/images/large-previews/f37/cloudy-scotland-1392088.jpg"
  }}
  style={{ width: 100, height: 100 }} //Add this
  resizeMode={"contain"}
  onLoadStart={() => alert("start")}
  onLoadEnd={() => alert("loaded")}
  onError={e => alert(e.nativeEvent.error)}
/>