aquí, con fines de prueba, he agregado solo una imagen de fondo, pero lo que realmente necesito hacer es cambiar el fondo en cada recarga. Eso significa que necesito pasar una matriz donde la ruta de todas las imágenes estará allí y el fondo debería cambiar en cada recarga. El código se adjunta a continuación. Todo el proyecto se basa en reaccionar.
function App() { return ( <div className="App" style={ { backgroundImage: `url("back.jpg")` } }> <div className='container'> <div className='container'> <Header/> <Footer/> </div> </div> </div> ); }Simplemente almacene las URL de la imagen en una matriz y luego genere un número aleatorio. Y luego obtenga el índice aleatorio de una matriz usando el número generado.
let imageArr = ["back.jpeg", "front.jpeg", "forward.jpeg", "backward.jpeg", "other.jpeg"]; let randomNum = = Math.floor(imageArr.length * Math.random()); let randomImage = imageArr[randomNum]; console.log(randomImage);Agregue la variable randomImage en la propiedad backgroundImage de su div de la siguiente manera.
<div className="App" style={ { backgroundImage: `url(${randomImage})` }}>
Simplemente escriba el código de fondo de esta manera:
backgroundImage: `url('${backgroundUrlList[Math.floor((Math.random() * backgroundUrlList.length))]}')`Por cierto, debe definir su propia backgroundUrlList.
Puede crear una matriz de imágenes y establecer el estado de la primera
¡Importante, esto cambiará la imagen cada 5 segundos! puede cambiar el intervalo en useEffect . !Si desea cambiar solo cada vez que se procesa, haga un Math.random desde la longitud de arrayOfImages.length
const imgArray = [image1, image2, image3, image4, image5]; const [state, setState] = useState({ img: 0 });No olvides importar las imágenes.
import image1 from "../assets/im1.jpeg"; import image2 from "../assets/im2.jpeg"; import image3 from "../assets/im3.jpeg"; import image4 from "../assets/im4.jpeg"; import image5 from "../assets/im5.jpeg";y en un useEffect cambia el estado de la imagen
useEffect(() => { const interval = setInterval(() => { if (state.img === 4) { setState((prev) => ({ ...prev, img: 0, })); } else { setState((prev) => ({ ...prev, img: state.img + 1, })); } }, 5000); return () => clearInterval(interval); }, [state.img]);En tu div establece la imagen de fondo
<section class="hero-wrap hero-wrap-2 js-fullheight ftco-degree-bg" style={{ backgroundImage: `url(${imgArray[state.img]})`, // backgroundSize: "cover", backgroundPosition: "center", // overflow: "hidden", }} >