How to Access Image in local JSON Array

Question

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,,,

It looks right, do you get a error? or is it just that the img path is wrong? — PEPEGA, Sep 18 '19 at 08:19
use src={require(item.pic)} not source={require(item.pic)} because you are requiring a local image, not a url image. — P4uB0rd4, Sep 18 '19 at 08:22
@P4uB0rd4 in react native you are suposed to use source like this `` If you are using react-natives Image component that is — PEPEGA, Sep 18 '19 at 08:25
This looks correct. I couldn't reproduce. See: https://snack.expo.io/B1mJ1OJPr The only thoughts I have are maybe your image paths are wrong, or your render method isn't getting called. Do you have any errors? — JoshG, Sep 18 '19 at 08:47
@Patte yes an error occur like this "Invalid call at line 31: require(JSON.stringify(item.pic))" — Majid Aziz, Sep 18 '19 at 08:47
@MajidAziz Why are you stringifying item.pic? It's already a string. — JoshG, Sep 18 '19 at 08:48
@MajidAziz "Not working" is not a helpful problem description. Are you getting any errors without JSON.stringify? Have you looked at the link I posted with the working example? — JoshG, Sep 18 '19 at 08:51
@AndroidNoobie i check this link working correctly but in Swiper Images doesnot render — Majid Aziz, Sep 18 '19 at 08:57
@AndroidNoobie you are using images from another Location while i m getting images from local docs — Majid Aziz, Sep 18 '19 at 09:17

score 1 · Accepted Answer · answered Sep 18 '19 at 09:18

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

score 0 · Answer 2 · answered Sep 18 '19 at 09:24

0

If there is some constants in all images you can use template literals.

src={require(`./Images/${image}.png`)}

And make ${image} inside your Hijama's loop.

p.s. I recommend you to refactor your variable names (use camelCase)

answered Sep 18 '19 at 09:24

Farzan Najipour

2,442
7
42
81

How to Access Image in local JSON Array

2 Answers2