[SOLVED] How do I add an image from a CDN in React Native?

How do I add an image from a CDN in React Native?

I'd like to display an image in a React Native app from 'cdn.weatherapi.com/weather/64x64/day/116.png'

this is what I'm trying at the moment but it isn't working:

   <Image
      style={styles.image}
      source={{ uri: 'cdn.weatherapi.com/weather/64x64/day/116.png' }}
    />

This code works with other images like 'https://simgbb.com/images/logo.png' for instance. Also, 'cdn.weatherapi.com/weather/64x64/day/116.png' works in a browser, so the image does exist.

thanks for the help

Solution

Make sure to include the protocol, and also ensure that the protocol is HTTPS not HTTP. The walled garden SDKs of Apple etc require adding extra perms for loading a non-HTTPS resource from a remote location.

  <Image
      style={styles.image}
      source={{ uri: 'https://cdn.weatherapi.com/weather/64x64/day/116.png' }}
    />