CODEWITHSUNDEEP
jsonreactjs
Alexd2
Alexd2

Reputation: 1114

React, load images local from json

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.

Upvotes: 1

Views: 8002

Answers (4)

Uma galgale
Uma galgale

Reputation: 1

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

  1. Replaced the JSON file with a JS file.
  2. Stored the mock data in a variable, imported images directly from the assets folder, and exported the JS file.
  3. 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.

Upvotes: 0

Loretta
Loretta

Reputation: 2211

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

Upvotes: 1

Manh Le
Manh Le

Reputation: 1650

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

Upvotes: 4

akhtarvahid
akhtarvahid

Reputation: 9769

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

Upvotes: -1

Related Questions