Issue with using exported pictures from another JavaScript file in React

Question

I am attempting to import some local pictures in a JavaScript file 'Photos-Photos.js' and export those pictures to be used in another JavaScript (React) file in order to avoid a bunch of imports in my main React file 'Photos.js'

I have attempted to put all of the images in a single object but I have now just resorted to exporting every variable holding the local path to the photos

In a nutshell, here is my Photos.js (React) file

import React, { Component } from 'react';
import Carousel from 'react-bootstrap/Carousel';
import * as Pics from "./Photos-Photos";

class Photos extends Component {
  render() {
    return(
      <div className="main-body-wrapper">
        <main className="body-content">

          <div className="slideshow-row-wrapper">
            <div className="slideshow-row-content">
              <div className="slideshow-title-wrapper">
                <div className="slideshow-title">
                  <h3>Sustainabilibash</h3>
                </div>
                <div className="photo-credz">
                  <p>Photos by: John Doe</p>
                </div>
              </div>
              <div className="main-slider-wrapper">
                <div className="main-slider-content">
                  <Carousel>
                    <Carousel.Item>
                      <img className="d-block w-100" src={Pics.AlChE1} alt="pic" />
                    </Carousel.Item>
                    <Carousel.Item>
                      <img className="d-block w-100" src={Pics.AlChE2} alt="pic" />
                    </Carousel.Item>
                  </Carousel>
                </div>
              </div>
            </div>
          </div>

        </main>
      </div>
    );
  }

}

Here is my 'Photos-Photos.js' file where I am exporting the images

export const AlChE1 = "./../images/photos/AlChE/AlChE-0.jpeg";
export const AlChE2 = "./../images/photos/AlChE/AlChE-1.jpeg";

I am receiving no errors; however, instead of displaying the image, I am being displayed with the alt text, 'pic'. I have attempted to just import every image in the 'Photos.js' React file and it works perfectly, but I don't want a bunch of imports in that file (The number of exported images in the 'Photos-Photos.js' code above is only ~ 1/10 of the images I need to use for this page)

Answer 1

one thing you can do its on each img tag import it's own pic like

img src={require('~/myphoto.jpg')}

and if you make the carousel manually and render the photos one after one you get tou your goal