How to display image from variable in react native-CodePudding

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)

CodePudding user response：

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>

CodePudding user response：

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" />
  )
})

CodePudding user response：

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>
);