0

I'm trying to gather image sources from a JSON file but whenever I use a JSON objects source I get a module error. Is there any workaround for this?

JSON FILE:

 {
   "Image": {"source": "./SourceFolder/ImageFile.png"}
 }

JS FILE

 const file = require('./jason.json');
 var jason = JSON.stringify(file.Image);
 jason = JSON.parse(jason);

 <Image source={require(jason.source)} />
drewvy22
  • 225
  • 1
  • 2
  • 11
  • check my answer here: https://stackoverflow.com/questions/44468500/image-react-native-not-working – Jigar Shah Jun 15 '17 at 15:30
  • @JigarShah thanks but that didn't work either. I think I'm stuck here. There may not be a way to store a bunch of image sources from a json and use them accordingly. – drewvy22 Jun 15 '17 at 15:34
  • try like this,https://stackoverflow.com/questions/36375532/react-native-rendering-multiple-images – Jigar Shah Jun 15 '17 at 15:40

1 Answers1

1

Dynamic requires are not supported unfortunalty. You need to pre-require all of your images, then you're able to dynamically call them from a reference.

const images = {
  image1: require('some_file.png'),
}

<Image source={images["image1"]} />
Alias
  • 2,983
  • 7
  • 39
  • 62
  • Thats a bummer. I'm using multiple Image files. Do I need to require each one directly? Or if I have a folder of images could I just pre-require the folder? – drewvy22 Jun 15 '17 at 15:25
  • And even if I pre-require it, I cant use it from the JSON – drewvy22 Jun 15 '17 at 15:31
  • I don't think you can pre-require directories or images like that, as it all needs to be pre-bundled. You're best trying to host them somewhere (like a Google storage bucket for cheap) and do a dynamic require with the image source. – Alias Jun 16 '17 at 08:35
  • thanks, I just saved my data in a local js file in an array. Probably a terrible idea but if I ever put the app on the market I'll try your idea. Thanks – drewvy22 Jun 16 '17 at 15:20