How do you set the source of an image to an imported image in React?-CodePudding

I am a beginner who is trying to learn how to create a slideshow in React. I have been following a tutorial that used this code to changed the background color of a div, but I would like to change the source of an image instead. I imported rms1, rms2 and rms3 from the directory, then placed them in an object called 'Slides', which I reference for the img src later around line 35.

However, whenever I try to run this, the images are broken. I can link directly to the image, so I know it is importing correctly, but I must be messing up the code somewhere around line 35-40:

import React from 'react';
import './Slideshow.css';
import rms1 from './RMSTreatmentPlanner.png';
import rms2 from './RMSRiskMovers.png';
import rms3 from './RMSChat.png';

const Slides = [{rms1}, {rms2}, {rms3}];
const delay = 15000;

function Slideshow() {
console.log(rms1);
  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);
  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }
  React.useEffect(() => {resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === Slides.length - 1 ? 0 : prevIndex   1
        ),
      delay
    );

    return () => {resetTimeout();};
  }, [index]);

    return (
      <div className="slideshow">
        <div className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }} >
          {Slides.map((imageSource, index) => (
           <img 
            className="slide" 
            key={index} 
            src={{imageSource}}
            alt="Slide"
            />
          ))}
        </div>

<div className="slideshowDots">
        {Slides.map((_, idx) => (
          <div key={idx} className={`slideshowDot${index === idx ? " active" : ""}`} onClick={() => {
            setIndex(idx);
          }}></div>
        ))}
      </div>




      </div>
      
    );
  }

  export default Slideshow;

CodePudding user response：

You're creating objects that seem to serve no purpose. Change Slides from this:

const Slides = [{rms1}, {rms2}, {rms3}];

To this:

const Slides = [rms1, rms2, rms3];

And change this:

src={{imageSource}}

To this:

src={imageSource}

CodePudding user response：

He is right. Just need to change the array elements and src property of img like below.

import React from 'react';
import './Slideshow.css';
import rms1 from './1.png';
import rms2 from './2.png';
import rms3 from './3.png';

const Slides = [rms1, rms2, rms3];
const delay = 15000;

function Slideshow() {

  const [index, setIndex] = React.useState(0);
  const timeoutRef = React.useRef(null);
  function resetTimeout() {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }
  }
  React.useEffect(() => {resetTimeout();
    timeoutRef.current = setTimeout(
      () =>
        setIndex((prevIndex) =>
          prevIndex === Slides.length - 1 ? 0 : prevIndex   1
        ),
      delay
    );

    return () => {resetTimeout();};
  }, [index]);

    return (
      <div className="slideshow">
        <div className="slideshowSlider"
        style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }} >
          {Slides.map((imageSource, index) => (
           <img 
            className="slide" 
            key={index} 
            src={imageSource}
            alt="Slide"
            />
          ))}
        </div>

<div className="slideshowDots">
        {Slides.map((_, idx) => (
          <div key={idx} className={`slideshowDot${index === idx ? " active" : ""}`} onClick={() => {
            setIndex(idx);
          }}></div>
        ))}
      </div>




      </div>
      
    );
  }

  export default Slideshow;

Look at this code. Assuming that images files are stored in /public/images, you can display them like this.

import img1 from '/images/1.png';
import img2 from '/images/2.png';
import img3 from '/images/3.png';

function Slideshow(){
    return(
        <>
          <img src={img1} alt="" />
          <img src={img2} alt="" />
          <img src={img13} alt="" />
        </>
    )

}