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

Question

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

Answer 1

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' }}
    />