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 stackoverflow.com/a/58553377/6544460 — akhtarvahid
– akhtarvahid, Commented Oct 25, 2019 at 6:38
But if put the path the file if show the images see other example: codesandbox.io/s/wizardly-paper-6ym8j — Alexd2
– Alexd2, Commented Oct 25, 2019 at 6:58

Manh Le · Accepted Answer · 2019-10-25 06:46:10Z

4

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, 2019 at 6:46

Manh Le

1,65016 silver badges27 bronze badges

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

4 Comments

Alexd2 Over a year ago

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 codesandbox.io/s/wizardly-paper-6ym8j

Manh Le Over a year ago

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 Over a year ago

@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.

Alexd2 Over a year ago

Your solution is fine, I just had the doubt by putting the route directly. @Manh Le

Loretta · Accepted Answer · 2021-05-29 11:34:05Z

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

Uma galgale · Accepted Answer · 2025-01-17 10:43:41Z

0

Problem: The image URL from mock JSON data was a string, making it incompatible with the 'src' attribute in the 'img' tag.
Solution:

Replaced the JSON file with a JS file.
Stored the mock data in a variable, imported images directly from the assets folder, and exported the JS file.
Accessed the 'imageUrl' field in the React component and used it in the img tag.

This ensures the bundler resolves paths correctly and avoids hardcoding image URLs as strings.

edited Jan 17 at 10:43

answered Jan 17 at 10:39

Uma galgale

11 bronze badge

1 Comment

Community Jan 17 at 20:17

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

akhtarvahid · Accepted Answer · 2019-10-25 06:34:37Z

-1

 {
  "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/[email protected]",
      "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>
  );
}

answered Oct 25, 2019 at 6:34

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

1 Comment

Alexd2 Over a year ago

The problem is with local images @vahid-akhtar

Collectives™ on Stack Overflow

React, load images local from json

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related