React Native require image from JSON file

Question

Im trying to get a more dynamic way of showing articles. I made a JSON file which contains all the info and loop over it and for each item it creates an item on the homepage. This is working and the title and text ar shown. Now im having trouble with the images. I dont get any errors so i think i might have to do with the path im calling in the json file.

project structure:

src
--articles
----img
------img.jpg
----articlePreview.js
----articles.json
----fullArticle.js
--homepage
----index.js 
App.js

Testing json, as you can see i tried some different paths and tried some more as well:

{
    "articles": [
        {
            "title": "Test",
            "imageName": "/img/img.jpg",
            "text": "more text to test"
        },
        {
            "title": "Test22",
            "imageName": "./img/img.jpg",
            "text": "more text to test"
        }
    ]
}

On the homepage i map all the items in the json file like this:

  const contents = json.articles.map(function (item) {
    return (
      <ArticleHome title={item.title} text={item.text} image={item.imageName} />
    );
 });

and finally the component which should display them:

function ArticleHome({title, text, imageName}) {

  return (
    <View>
      <Card>
        <CardItem header bordered>
          <Body>
            <Image
              style={{ width: '100%', height: 400 }}
              source={{uri: imageName}} 
            />
            <Text>
              {title}
            </Text>
            <Text>
              {text.substring(0,240)}...
            </Text>
            <Button
              title="Lees Meer"
              color="#d10a10"
              onPress={() => RootNavigation.navigate('Article')}
            />
          </Body>
        </CardItem>

      </Card>
    </View>
  );
}

Waheed Akhtar · Accepted Answer · 2020-06-04 13:46:00Z

0

Instead of passing image in this way

"imageName": "/img/img.jpg",

You have to get an image like below.

imageName: require("./img/img.jpg"),

And the simply pass this path to your Image tag

<Image source={imageName} />

Here is a demo snack.

https://snack.expo.io/@waheed25/smiling-carrot

Edit: Here is a demo with your code

https://snack.expo.io/@waheed25/c91df6

edited Jun 4, 2020 at 13:46

answered Jun 4, 2020 at 12:25

Waheed Akhtar

3,1973 gold badges18 silver badges32 bronze badges

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

9 Comments

Heis Over a year ago

that doesnt seem to work, getting unknown know module "./img/img/jpg"

Waheed Akhtar Over a year ago

Are you passing exactly the same? "./img/img/jpg"? If yes then pass proper name of the image with extension.

Heis Over a year ago

i made a typo but yes im passing ./img/64332.jpg which is in the img directory

Waheed Akhtar Over a year ago

Remove double quotes from your "imageName" in your JSON file.

Waheed Akhtar Over a year ago

I also added a demo to my answer.

|

ouflak · Accepted Answer · 2021-10-23 13:58:40Z

0

The only thing that worked for me was using encode64 image:

{ data.json = 
    "1":{
        "id":"1",
        "text": "test",
        "img": "encode64img" // something like data:image/png;base64,iVBORw0KGgoAAAA
    }
}

Then in your app:

    import data from './data.json'
 const[uri, setUri] = useState(data[1].img)
 <Image style={styles.img} source={{uri: uri}}/>

edited Oct 23, 2021 at 13:58

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Oct 23, 2021 at 13:40

Munbran77

11 bronze badge

Collectives™ on Stack Overflow

React Native require image from JSON file

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related