Importing images dynamically from JSON file in reactJS

Question

My json file: (items.json)

[
    {
        "title": "Nike shoes",
        "description": "New nike shoes",
        "price": "40$",
        "image": "../../../../assets/items/nike.jpg",
        "rank": "2"
    }
]

The file I'm trying to import the image in:

import React from "react";
import "./style.css";
import Items from "../../../../items.json";

export default function ListedItems() {
  return (
    <div>
      <div class="container">
        {Items.map(item => (
          <div class="col-sm-4">
            <div class="panel panel-primary">
              <div class="panel-heading">{item.title}</div>
              <div class="panel-body">
              <img
                  src={require(item.image)}
                  alt="Nike image"
                />
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

I get this error "Error: Cannot find module '../../../../assets/items/nike.jpg'" , if I use src={require('../../../../assets/items/nike.jpg')} it works.

Please, could you include CodeSandbox to replicate and check? — Adrian
– Adrian, Commented Apr 21, 2020 at 10:30
What is the setup that you're using? Is it create-react-app or something similar? You shouldn't be doing src={require(...)} - it should be src={item.image} instead. — goto
– goto, Commented Apr 21, 2020 at 10:54
No not really using webpack, I have just read about it, I'll try it :) Yes I used create-react-app, and the {item.image} doesnt work directly since it doesnt import the image. — aysam
– aysam, Commented Apr 21, 2020 at 10:54

Andrii Golubenko · Accepted Answer · 2020-04-21 11:06:20Z

3

The problem is that you try to import your images in a runtime. You wrote, that you used src={require('../../../../assets/items/nike.jpg')} and it worked. But this code doesn't work.

Yes, you won't have an error in a browser console, but the image also won't load. Because require() function returns a Promise. And in this case, you will have in your browser:

<img src="[object Promise]" alt="Nike image">

You can resolve this issue by changing your items.json file from json to js and import images there.

import NikeImage from "../../../../assets/items/nike.jpg";
export const items = [
    {
        "title": "Nike shoes",
        "description": "New nike shoes",
        "price": "40$",
        "image": NikeImage,
        "rank": "2"
    }
]

and make some changes in your component:

<img src={item.image} alt="Nike image" />

But this code will only work if you are using file-loader in your webpack configuration.

In case when you have to use only json files or you get this information from the server. You should use CopyWebpackPlugin. If you use create-react-app (as you wrote in a comment), it already contains CopyWebpackPlugin and it copies your public folder. In this case just move your assets folder to public and change your items.json file

...
"price": "40$",
"image": "/assets/items/nike.jpg",
...

and your component:

<img src={item.image} alt="Nike image" />

edited Apr 21, 2020 at 11:06

answered Apr 21, 2020 at 10:45

Andrii Golubenko

5,1991 gold badge26 silver badges29 bronze badges

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

1 Comment

aysam Over a year ago

the src={require('../../../../assets/items/nike.jpg')} did work, it did load the image into the browser. I will try changing the json to js, although it was a requirement that I use a json file :/ Thanks!

Collectives™ on Stack Overflow

Importing images dynamically from JSON file in reactJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related