React, load images local from json

Question

Yes, this question may be duplicated from other questions, but I couldn't find solution for this problem.

I create something simple

1 component that read a json and load image.

The json

{
  "images": [
    {
      "id": 1,
      "url": "../assets/images/slider/croissant-other.jpg",
      "description": "Croissant"
    },
    {
      "id": 2,
      "url": "../assets/images/slider/croissant-3570.jpg",
      "description": "Croissant 3570"
    }
  ]
}

The component

import React from "react";
import jsonCarrousel from "../data/carrousel.json";

function Carrousel() {
  return (
    <div>
      {jsonCarrousel.images.map((image, i) => (
        <div className="item" key={i}>
          <img src={require(`${image.url}`)} alt={image.description} key={i} />
        </div>
      ))}
    </div>
  );
}

export default Carrousel;

The example in live

https://codesandbox.io/s/stupefied-fast-1zfdj

The error:

/src/assets/images/slider/croissant-other.jpg hasn't been transpiled yet.

check this solution please https://stackoverflow.com/a/58553377/6544460 — akhtarvahid, Oct 25 '19 at 06:38
But if put the path the file if show the images see other example: https://codesandbox.io/s/wizardly-paper-6ym8j — Alexd2, Oct 25 '19 at 06:58

score 3 · Accepted Answer · answered Oct 25 '19 at 06:46

3

Compiled code will look into /public to find your images. You should move your assets to /public instead of src. (manually or by bundle tool)

Also, image source should be src={`${image.url}`}

https://codesandbox.io/embed/elastic-solomon-1ul1o

answered Oct 25 '19 at 06:46

Manh Le

1,630
16
26

It is a solution but there is something strange to me, if I add the text directly without reading the json if it shows it https://codesandbox.io/s/wizardly-paper-6ym8j – Alexd2 Oct 25 '19 at 06:56
If you use the text directly in code, the image source will be resolve at compile time (that can access the assets inside src folder), I think. – Manh Le Oct 25 '19 at 07:03
@Alexd2 you can inspect the image source in 2 solutions. With the hard code src, your images are uploaded to some server then get the specific url. In my solution, the image src still relative as in the code. – Manh Le Oct 25 '19 at 07:05
Your solution is fine, I just had the doubt by putting the route directly. @Manh Le – Alexd2 Oct 25 '19 at 07:47

score 0 · Answer 2 · answered May 29 '21 at 11:34

This is a more descriptive solution.

To load images dynamically from a local JSON file, you need to put the images that you would like to use in the JSON file, inside a folder in the public folder (you can name it whatever you like). E.g. public/images/imgage.png.

You can then render it with: You can import it in your JSON like so:

{
  "images": [
    {
      "id": 1,
      "url": "/images/imgage.png"
    }
  ]
}

...
  <img src={require(`${image.url}`)} alt={image.description} key={i} />
...

create-react-app has a public folder by default.

The folder structure would look something like this:

└───public
│   └───images
│       │   image.png
│   
└───src
    │   yourfiles.js

Alternatively, you can import the images that are in the src folder, directly in the react component to render them:

import img from "./imgage.png";

const component = () => <img src={img} />

score -1 · Answer 3 · answered Oct 25 '19 at 06:34

 {
  "images": [
    {
      "id": 1,
      "url": "https://image.freepik.com/free-photo/image-human-brain_99433-298.jpg",
      "description": "Croissant"
    },
    {
      "id": 2,
      "url": "https://www.belightsoft.com/products/imagetricks/img/core-image-filters@2x.jpg",
      "description": "Croissant 3570"
    }
  ]
}

Code changed

function Carrousel() {
  return (
    <div>
      {jsonCarrousel.images.map((image, i) => (
        <div className="item" key={i}>
          <img src={image.url} alt={image.description} key={i} />
        </div>
      ))}
    </div>
  );
}

The problem is with local images @vahid-akhtar – Alexd2 Oct 25 '19 at 06:40 — Alexd2, Oct 25 '19 at 06:40

React, load images local from json

3 Answers3

Linked