cacheImages, how to refer to them and why they throw an error

#1

Hi peps,
first of all, awesome tool to get started with React Native:)

I’m prefetching images the way the docs explanes it, but I get a warning, when caching the image from the example (it’s still https). And when they are prefetch, how do I refer to the when i want to use them in the tag – do I just use the url or …?

_loadResourcesAsync = async() => {
    const imageAssets = cacheImages([
      //'https://orsted.dk/-/media/WWW/Images/DCS/2018/10/Vaskemaskine.ashx?la=da&mh=720&mw=720&hash=443E700913D059E322FE01F5BFB03F5433447288',
      require('./../assets/images/icon.png'),
      require('./../assets/images/splash.png'),
    ]);

    const fontAssets = cacheFonts([
      {'OrstedRegular': require('./../assets/fonts/OrstedSans-Regular.ttf'),
      'OrstedBold': require('./../assets/fonts/OrstedSans-Bold.ttf'),
      'OrstedLight': require('./../assets/fonts/OrstedSans-Light.ttf')}
    ]);

    await Promise.all([...imageAssets, ...fontAssets]);
  }


cacheImages = (images) => {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}
#2

Hey @cubanpete,

Can you share what the warning says when you have the url included in the prefetching code? Also, when you prefetch a web image, you’ll just continue to use the url when you use it in an Image component, but rather than make a network request it will fetch it locally.

Cheers,

Adam

1 Like
#3

Wow Adam, thanks, that really helped.

If disable the prefetching of the https://orsted.dk/-/media/WWW/Images/DCS/2018/10/Vaskemaskine.ashx?la=da&mh=720&mw=720&hash=443E700913D059E322FE01F5BFB03F5433447288 image, then everything works fine. But if I try to prefetch the image (or any other image) I first get an error saying that the font OrstedBold could not be loadAsync … then if I remove all the refrences to the OrstedBold font, I get this error.

Cheers
Kasper

closed #4

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.