Source Image React Native-CodePudding

I want to ask ask you all. I want to display image from local asset but for filename from object response api. I have tried some code but can't work. Do you everyone help me? below is some code that I have tried. I also added image to mylocal and my object response api already the same name with extension

<Image
   source={`../../../asset/images/Topup/${props.image}`}
   style={styles.GridImage}
   resizeMode="contain"
/>

<Image
   source={'../../../asset/images/Topup/'   ${props.image}}
   style={styles.GridImage}
   resizeMode="contain"
/>

<Image
   source={require(`../../../asset/images/Topup/${props.image}`)}
   style={styles.GridImage}
   resizeMode="contain"
/>

<Image
   source={require('../../../asset/images/Topup/'   ${props.image})}
   style={styles.GridImage}
   resizeMode="contain"
/>

CodePudding user response：

pass image as prop like this
props.image will equal require('fullpath/to/image-without-variables')
use it like this
<Image source={props.image} .../>

CodePudding user response：

You cannot use variables when requiring an image. The argument passed to require must be a string literal. Try require('../../../asset/images/Topup/image_name.extension').

CodePudding user response：

You can use

<Image source={require(`../../../asset/images/Topup/${props.image}`)} style={styles.GridImage} resizeMode="contain" />

and also give width and height to GridImage

CodePudding user response：

Try to copy the path of the image and paste it

you can import the image to the value after that write the value in the source

import value from 'path your image';


<Image
   source={value}
   style={styles.GridImage}
   resizeMode="contain"
/>