从包含许多文件的文件夹中反应本机动态导入图像

Question

I have a image folder say answers where I am storing answer for my question which are images

There are 200 images for now in that folder.

Now I want to show the image of the answer according to the user's answer.

I am generating the answers randomly

`var answer = getAnswers(data)` // some calculation for file name for answer

<Image source={require('../path/to/my/answer/' + answer + '.jpg')}

Doing this I am getting error ``require expect exactly 1 string literal argument

I came to know that builder needs to know the location before building. But how to solve this type of issue.

I can not map 200 files initailly for require

var one = require('../path/one.jpg')
var two = require('../path/two.jpg')

How can I solve this type of issue. Is there any way to do this ??

Help needed.

Answer 1

A dynamic search path in require is simply not possible.

From what I understand you have 2 options here:

1. Generate an Image file

Instead of writing 200 lines by hand you can make a script that scans through your image folder and generates a list of image urls. I would suggest a format similar to:

// Images.js

export const Answers = { 
   ANSWER_ONE : require('../path/one.jpg'),
   ANSWER_TWO : require('../path/two.jpg'),
   ...
}

Then use it:

import {Answers} from './Images'

var answer = getAnswers(data)

<Image source={Answers[answer]} />

2. Copy image files to asset folders

If choosing this option you have to copy all image files to both your android and ios projects assets folder. You are then able to use them like this:

var answer = getAnswers(data)

<Image source={{uri: '../path/to/my/answer/' + answer + '}} />

Read more about using image assets .

...

Even though the second option seems tempting I would prefer the first in most cases. Mostly because the second requires you to make two copies every time you add an image (assuming you supporting both android and ios). Also, option 1 gives your better typing suggestions where you won't misspell the image name.

Hope this helps!