React Native - Dynamic Image Source

Question

I'm trying to loop through the SOURCE array with the map method, but I keep getting this error:

Unknown named module: '../images/one.jpeg'

Anyone know why this is happening? The file path in the require is definitely correct.

var SECTIONS = [
  {
    title: 'One',
    fileName: 'one.jpeg',
  },
  {
    title: 'Two',
    fileName: 'two.jpeg',
  },
  {
    title: 'Three',
    fileName: 'three.jpeg',
  },
  {
    title: 'Four',
    fileName: 'four.jpeg',
  },
];


{SECTIONS.map((section, i) => (
   <CategoryCard
     key={i}
     source={require(`../images/${section.fileName}`)}
     title={section.title}
   />
))}

Answer 1

I don't think this is possible because react native needs to know what to bundle ahead of time (AFAIK). However, you can require all the files in your array:

var SECTIONS = [
  {
    title: 'One',
    file: require('../images/one.jpeg'),
  },
  {
    title: 'Two',
    file: require('../images/two.jpeg'),
  },
  {
    title: 'Three',
    file: require('../images/three.jpeg'),
  },
  {
    title: 'Four',
    file: require('../images/four.jpeg'),
  },
];


{SECTIONS.map((section, i) => (
   <CategoryCard
     key={i}
     source={section.file}
     title={section.title}
   />
))}

Answer 2

You can't use dynamic links. The best hack that i found to solve this is this:

var SECTIONS = {
  One: {
    title: 'One',
    file: require('../images/one.jpeg'),
  },
  Two: {
    title: 'Two',
    file: require('../images/two.jpeg'),
  },
  Three: {
    title: 'Three',
    file: require('../images/three.jpeg'),
  },
  Four: {
    title: 'Four',
    file: require('../images/four.jpeg'),
  },
};


{SECTIONS.map((section, i) => (
   <CategoryCard
     key={i}
     source={section.file}
     title={section.title}
   />
))}

That way, you can just use the files and if you have some kind of dynamic image selection, you can just use something like this

<Image source={SECTIONS[image.type]} />

Answer 3

try opening the file in separate browser using direct URL something like

http://<><>/imgages/one.jpg

You can also do something like this as well:

One working example for displaying dynamic images using react :

Example Click Here

Answer 4

Got a working solution, though not recommended for large images, works perfectly for (a lot of)small images.

Steps:

1. Convert the icon(s) to base64 string(s).
2. Create a JSON file with filename as the keys and the base64 strings as values. (You can also store them to a local database)

e.g. ImageData.json

{

"icon1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......==",
"icon2": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQ.......=="

}

3.Import the json file to the place where you require the images dynamically.

e.g.

const imageData = require("./images/ImageData.json")

4: Get/generate the key/filename at runtime. and get the image source.

e.g.

const imageSrc = imageData[keyname]

5: Generate a image dynamically at runtime.

e.g.

<Image style={{ width: 70, height: 70, resizeMode: Image.resizeMode.contain }} source={ uri: imageSrc } />

Done..

Extra.. Written a helper python script to automate the json file creation.

import base64
import os

directory = os.fsencode('.')

with open('ImagesData.json', 'wb') as jsonFile:
    jsonFile.write(bytes('{', 'utf-8'))

    written = False

    for file in os.listdir(directory):
        filename = os.fsdecode(file)

        if filename.endswith('.png'):
            with open(filename, "rb") as image_file:
                if written:
                    jsonFile.write(bytes(',\n','utf-8'))
                encoded_string = base64.b64encode(image_file.read())
                jsonFile.write(bytes(('"' +filename+ '":'), 'utf-8'))
                jsonFile.write(bytes('"data:image/png;base64,', 'utf-8') + encoded_string + bytes('"', 'utf-8'))
                written = True

    jsonFile.write(bytes('}', 'utf-8'))

1. Copy the script to the image folder and run the script (requires python 3.6).
2. A json file will the created with image name as key and base64 string as values.
3. Copy the file to project and use (You can delete the images after that).
4. Use the json file as mentioned above.