How can I display images in React.js app from a json file?

Question

I’m developing a little website/portfolio on React.js and I’m having some issues to display images that are stored in a json file.

The console shows the files but we can’t see the images in the browser ! Can anyone lend me a hand please ?

Here’s my json file:

export const GaleriesData = [
  {
    id: 1,
    tableaux: [
      “../assets/img/galeries/aformaimediata/aformaimediata1.jpg”,
    ...
      “../assets/img/galeries/aformaimediata/aformaimediata8.jpg”,
    ],
  },
  {
    id: 2,
    tableaux: [
      “../assets/img/galeries/espiritoarte/espiritoarte1.jpg”,
     ...
      “../assets/img/galeries/espiritoarte/espiritoarte10.jpg”,
    ],
  },
];

And here’s my component:

import React, { useState } from ‘react’;
import FbImageGrid from ‘react-facebook-photo-grid’;
import { GaleriesData } from ‘../data/galeriesData.js’

const Galerie = (props) => {
    const [currentGalerie] = useState(GaleriesData);
    const galerie = currentGalerie[props.galerieNumber].tableaux;
    return (
        <div>
        <FbImageGrid images={galerie} maxWidth={800}  />
        </div>
    )
}
export default Galerie

Muhammad Radwan · Accepted Answer · 2021-05-17 10:34:47Z

1

I can't comment because of the 50 reputation thing. But you do know that the import of the image for example, ../assets/img/galeries/aformaimediata/aformaimediata1.jpg is relative to where the JSON file is, not to React component?

answered May 17, 2021 at 10:34

Muhammad Radwan

653 bronze badges

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

Collectives™ on Stack Overflow

How can I display images in React.js app from a json file?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related