Relative image paths from js object in React

Question

In a create-react-app app, I am using React Image Gallery. I am having the user select one of my galleries and then pass the array containing the image paths to the <ImageGallery items={ images } /> component. It works if I use absolute paths, like so:

{'images': 
  [
    { original: 'https://domain.tld/image_01.jpg' },
    { original: 'https://domain.tld/image_02.jpg' } 
  ] 
}

My file structure is as follows:

>src
  >base
   App.js           // this is where the array is assigned to state
  >data
    >containertypes
      >js
       SlideShow.js  // this is where the array is read from props and used in <ImageGallery />
  >img
   image_01.jpg
   image_02.jpg

I tried using relative paths like so:

{'images': 
  [
    { original: '../../../img/image_01.jpg' },
    { original: '../../../img/image_02.jpg' } 
  ] 
}

Unfortunately, to no avail (also tried one less and one more '..'). How can I use relative paths in React without having a chance to use import statements on each image file?

At this point, considering the notorious troubles with paths in React (see this or this or this) , I do not think that this is a problem with the image gallery component, but a general React issue.

have you tried `/img/image_01.jpg`? – Alan Omar Jun 13 '21 at 16:47 — Alan Omar, Jun 13 '21 at 16:47

score 0 · Accepted Answer · answered Jun 13 '21 at 18:58

Move your images folder "img" from src/ to public/ and add process.env.PUBLIC_URL :

import React from 'react';
import ImageGallery from 'react-image-gallery';
import './App.css';

const images = [
  { original: process.env.PUBLIC_URL + '/img/image_01.jpg' },
  { original: process.env.PUBLIC_URL + '/img/image_02.jpg' },
];

export default function App() {
  return (
   <ImageGallery items={images} />
  );
}

Relative image paths from js object in React

1 Answers1