import { useState } from 'react'
import img1 from './Images/bg-1.jpg';
import img2 from './Images/bg-2.jpg';
import img3 from './Images/bg-3.jpg';
import img4 from './Images/bg-4.jpg';
import img5 from './Images/bg-5.jpg';
export default function Home() {
const[BackPhoto, setBackPhoto] = useState(img1);
let i = 0;
  function change(){
    let slideshow = [
      img2,
      img3,
      img4,
      img5
    ]
    i  ;
    setBackPhoto(slideshow[i]);
  }
  setInterval(() => {
    change();
  }, 10000);
             
  
  return (
<>
<section
        style={{ backgroundImage : BackPhoto}}
      >
</section>
</>

I am a beginner and learning react js . I am making a website and I have been stuck. I want to import some images and make a slideshow and use it as a background photo by turning it in a state.. Please solve my problem.

CodePudding user response：

1. Move bg.jpg to your_project_directory/public/Images/bg.jpg.
2. Set the value to the url path as a string:

import {default as React} from 'react'

export default function Home() {
  return (
    <>
      <section style={{backgroundImage: 'url("./Images/bg.jpg")'}}></section>
    </>
  );
}

CodePudding user response：

Make it easy and use

style={{ backgroundImage: `url(${img})` }}

if you like more information. I think this will help. https://create-react-app.dev/docs/adding-images-fonts-and-files/

CodePudding user response：

There's no reason to use state here, just do:

style={{ backgroundImage: "url(" img ")"}}

Think like this of state: If the data is intended to be changed over the course of the app, it should be state. Otherwise if it's static data (like an image in your example) then state is not needed, a variable or simple import like your example is enough

EDIT:

Your question wasn't properly asked then. The code below should work with your idea of a slideshow:

import React from "react";
import { useEffect, useState } from "react";

export default function Home() {
  const [photo, setPhoto] = useState(1);

  useEffect(() => {
    const interval = setInterval(() => {
      change();
    }, 10000);

    return () => {
      clearInterval(interval);
    };
  }, [photo]);

  const change = () => {
    if (photo === 5) {
      setPhoto(1);
      return;
    }

    setPhoto((prev) => prev   1);
  };

  const returnPhotoURL = () => {
    switch (photo) {
      case 1:
        return "./images/img1.jpg";
      case 2:
        return "./images/img2.jpg";
      case 3:
        return "./images/img3.jpg";
      case 4:
        return "./images/img4.jpg";
      default:
        return null;
    }
  };

  return (
    <div
      style={{
        backgroundImage: `url(${returnPhotoURL()})`,
        backgroundPosition: "center",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        width: "500px",
        height: "500px",
      }}
    ></div>
  );
}

To summarize: You have a useEffect which handles your interval (keep this in mind, when using intervals always clean it up when component is dismounting), one change function which just switches which image to show with state, and a function which returns the image URL based on the current state changed in the change() function.