It works if I show the image like this:
<Thumbnail source= {require('../images/01.jpg')} />
But fails on :
<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />
person.id
comes from an array of people
. Printing it in <Text>{person.id}</Text>
gives the output as 01
or 02
.
How to show a local image with the name as the prop.value?
I tried:
<Thumbnail source= {require(`../images/${person.id}.jpg`)} />
and
<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />
Both fails with error : Unnamed named module: '../images/1.jpg'
What you are trying to achieve is not really possible.
Packaging happens once before runtime so the variable person.id
doesn't have value yet.
This has already been discussed here.
In the discussion you can see solutions to this problem.
Basically you need to import all possible files you are going to use.
Simple approach:
var firstImage = require('../images/01.jpg');
var secondImage = require('../images/02.jpg');
var myComponent = (whichImageToUse) ? firstComponent : secondComponent;
Sophisticated approach: Create a file which requires all images.
allImages.js
export default {
'01': require('../images/01.jpg'),
'02': require('../images/02.jpg'),
// import all other images
}
Import that file where you need to use an image and access the individual image like this:
import images from '../images/allImages'
<Thumbnail source={images[person.id]} />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With