React, load images local from json - 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.

Answer 1

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

Answer 2

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} />

Answer 3

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