javascriptarraysjsonreact-nativereact-native-swiper

How to Access Image in local JSON Array


Hijama = [
{
  name: 'Body Back',
  pic: '../Images/BackSide.png',
},
{
  name: 'Body Front',
  pic: '../Images/images.jpg',
},];

//here i want to render my pics

     render_swiper_data = () => {
return this.Hijama.map((item, index) => {
  console.log('check', item);
  return (
    <View key={index}>
      <Text>{item.name}</Text>
      <Image
        source={require(item.pic)}
        style={{
          height: '100%',
          width: '100%',
        }}
      />
    </View>
  );
})};

//now my question is how can i access these images i try both Require and uri,,,


Solution

  • you cannot using require like that. react-native can't read it. so you must store all of local image location like this:

    Hijama = [
    {
      name: 'Body Back',
      pic: require('../Images/images.jpg'),
    },
    {
      name: 'Body Front',
      pic: require('../Images/images2.jpg')
    },];
    

    and then use it in your code:

         render_swiper_data = () => {
    return this.Hijama.map((item, index) => {
      console.log('check', item);
      return (
        <View key={index}>
          <Text>{item.name}</Text>
          <Image
            source={item.pic}
            style={{
              height: '100%',
              width: '100%',
            }}
          />
        </View>
      );
    })};