Import image from json source (create-react-app)

Question

I have some json with data and one of param is path to my local folder with images:

// data.json
[
  {
    "id": 1,
     "image": "assets/somepic.png"
  },
  {
    "id": 2,
     "image": "assets/anotherpic.png"
  }
  // similar data goes there
]

Then I import those data into my component

import data from "data.json"

and I want to map thru this data:

render() {
  return (
     data.map((item) => (
       // Ofc it won't work if I just put {item.image} in src,
       // because we need to import image before use it
       // that's why I'm trying to use require
       <img src={require(item.image)} />
     ))
  )
}

But it won't work. How can I use images, which local patch is specified in json data for create-react-app?

Please, note: app should NOT be ejected.

Instead of map, try forEach – pavi2410 Aug 02 '18 at 20:27 — pavi2410, Aug 02 '18 at 20:27
You also need to wrap the img tags within a div tag. – pavi2410 Aug 02 '18 at 20:32 — pavi2410, Aug 02 '18 at 20:32

score 0 · Answer 1 · answered Aug 02 '18 at 20:30

0

Check if create-react-app has Webpack configured to bundle images (.png check webpack.config.js) out of the box. If so, it seems like you're only missing a relative path starting like this './assets/anotherpic.png' if assets is in the same folder as the component.

answered Aug 02 '18 at 20:30

spakmad

880
6
15

create-react-app has webpack files only for ejected apps. – WebArtisan Aug 02 '18 at 20:31
`assets/anotherpic.png` is not a relative path by Webpacks definition. it may be looking for the file in your modules. https://webpack.js.org/concepts/module-resolution/#relative-paths – spakmad Aug 02 '18 at 20:40

score 0 · Answer 2 · answered Oct 15 '18 at 18:32

0

Make sure that load from require right paths. Your photos doesn't located assets/anotherpic.png , maybe you should load from absolute path ./assets/anotherpic.png

answered Oct 15 '18 at 18:32

xargr

2,788
1
19
28

Jérémie Boulay · Answer 3 · 2019-04-01T13:14:09.267

If you use Webpack v4, have you try to use require.context()?

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

See the source into the webpack documentation

Your code can be something like that :

data.json

[
  {
    "id": 1,
     "image": "somepic.png"
  },
  {
    "id": 2,
     "image": "anotherpic.png"
  }
  // similar data goes there
]

file.js

const pathToAssets = require.context('assets/');

...

render() {
  return (
     data.map((item) => (
       <img src={pathToAssets(item.image)} />
     ))
  )
}

Import image from json source (create-react-app)

3 Answers3