CODEWITHSUNDEEP
javascriptreact-native
Nithin C
Nithin C

Reputation: 215

Dynamically generate <Image> tag [React-Native]

I want to render a view (which contains question and options).If the question has multiple images in it,how can i generate image tag accordingly. for eg:

question: what is the value of <Image>21xtp-1.png</Image> and <Image>21xtp-2.png</Image> ?

I want to replace that Image tags with tag in react native. i can do it like

<Text>what is the value of <Image source={{uri:../images/21xtp.png-1}}/> and <Image source={{uri:../images/21xtp.png-1}}/> </Text>

but how can i place the tags acoording to the number of images in a question which can vary.

Upvotes: 2

Views: 555

Answers (2)

Nithin C
Nithin C

Reputation: 215

What @atitpatel mentioned was correct,but i failed to get the image from rendering because i was getting it using file path

USING FILEPATH :

file:///data/user/0/com.example/files/21xtp.png

So,if any one across come up with same issue .Don't forget to add height and width as style to image tag.

for(i=0; i<imageUriArray.length;i++){
return(
 <Image source={{uri : imageUriArray[i]}} style=
  {{height:300,width:300}}/>
 )
}

And USING HTTP

if you are getting file using http ,make sure you add https to the uri

for(i=0; i<imageUriArray.length;i++){
 return(
 <Image source={{uri : "https://www.example.com/123.png"}} style=
   {{height:300,width:300}}/>
 )
}

Upvotes: 1

atitpatel
atitpatel

Reputation: 3184

I couldn't understand the question very properly. But seems like you want to dynamically render the images depending upon your data.

Let's say your image uris are stored in an array. Then you can write your code something like :

for(i=0; i<imageUriArray.length;i++){
   return(
     <Image source={{uri : imageUriArray[i]}}/>
   )
}

Upvotes: 3

Related Questions