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)

Are you using create-react-app ? It seems to work for me when I put your code in there? codesandbox.io/s/zen-franklin-3s7hm — ak85
– ak85, Commented Jun 12, 2019 at 1:52
@ak85 I am using create-react-app. It works for url's, but it doesn't work for local images. I am just going to go with Hagai Harari's solution below. Thanks for your time though — macaato
– macaato, Commented Jun 12, 2019 at 1:57

Hagai Harari · Accepted Answer · 2019-06-12 01:46:50Z

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

answered Jun 12, 2019 at 1:46

Hagai Harari

2,8673 gold badges14 silver badges27 bronze badges

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

1 Comment

macaato Over a year ago

Thank you. This works perfectly. I was hoping to use something a little more 'javascripty' but this works!

Collectives™ on Stack Overflow

Issue with using exported pictures from another JavaScript file in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related