How to display image from variable in react native

Question

i have array of object and in object is string which is a path of image

  var [data, setData] = useState([
        {
            src: "../assets/image.jpg",
        },
        {
            src: "../assets/image2.jpg",
        },
    ])
  return (
  <SafeAreaView>
      <View>
          {data.map(image => {
              return(<View>
                      <Image source={require(image.src)} /> //THIS DOESNT WORK 
                  </View>)
          })}
      </View>
    </SafeAreaView>
  );
}

this work require('../assets/image.jpg') but i want from data to get src - and i tryed this ---- source={{uri: ``${user.src}`}} ---- it doesnt work--------------------------------------------------------- And how i can display image from web not in project folder ( exemple: https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg)

Rahman Haroon · Accepted Answer · 2022-01-17 15:32:51Z

4

Use FlatList to render array of items and it has lazy loading so it will be good when you use large amount of data.

In your case use this code and it will be working fine:

  var [data, setData] = useState([
        {
            id: 1,
            src: require("../assets/image.jpg"),
        },
        {
            id: 2,
            src: require("../assets/image2.jpg"),
        },
    ])
  return (
 <SafeAreaView>
   <FlatList
       data={data}
       showsVerticalScrollIndicator={false}
       renderItem={({item}) => (
            <Image
             source={item.src}
             style={styles.imageStyle}
            />
       )}
       keyExtractor={item => item.id.toString()}
     />
  </SafeAreaView>

answered Jan 17, 2022 at 15:32

Rahman Haroon

1,1533 gold badges16 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Beni Djokovic Over a year ago

Hi, thanks for answering - that is working, but what if i get that data from api and doesnt have require in it, and what if path is from the web example static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg

Rahman Haroon Over a year ago

if you are getting images from an api you don't need to add require before that.. You need to call image sourece like this source={{ uri: imageUrl }}

Manojkanth · Accepted Answer · 2022-01-17 17:59:23Z

2

Q2) How i can display image from web not in project folder?

answer:

<Image source={{uri: 'https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg'}} style={{width: 400, height: 400}} />

Q1) For your first question. You are not getting value correctly. Please try this answer.

    var [data, setData] = useState([
  {
    src: require("../assets/image.jpg"),
  },
  {
    src: require("../assets/image2.jpg"),
  },
]);

return (
  <SafeAreaView>
    <View>
      {data.map((image) => {
        return (
          <View>
            <Image source={image["src"])} /> //THIS WILL WORK
          </View>
        );
      })}
    </View>
  </SafeAreaView>
);

edited Jan 17, 2022 at 17:59

answered Jan 17, 2022 at 15:18

Manojkanth

1,17913 silver badges31 bronze badges

2 Comments

Beni Djokovic Over a year ago

Hi, i am getting error q1) - Invalid call at line 84: require(image["src"]), and q2) i want the same way like q1 just not to be '../assets/image2.jpg' (to get from data not just put url)

Manojkanth Over a year ago

since there is an accepted answer. i have updated it. it will help someone

jonu29 · Accepted Answer · 2022-01-17 14:19:04Z

had this problem and I solved it like this

../src/assets/images -> create index.js file and add your images in images folder. Your index.js should be like this

import firstImg from "./image_1.png";
import secondImg from "./image_2.png";

const images = {
  firstImg,
  secondImg,
};

export default images;

then, in your component, import images.js and create your object.

import images from "../../assets/images";

const imagesBlock = [
    {
       imgSrc: images.firstImage
    },
    {
       imgSrc: images.secondImage
    }
]

and then use .map() function. Also you can add a custom class for each image.

imagesBlocks.map((source, index) => {
  const { imgSrc } = source;
  return (
    <img src={imgSrc} key={index} alt="image" />
  )
})

Hi, thank you for answering, but this is not react its react-native it is <Image /> not <img />, and what if i get that data from api (fetching it),

Collectives™ on Stack Overflow

How to display image from variable in react native

3 Answers 3

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Related