Las imágenes en la carpeta "imágenes" no se muestran en la vista... la ruta es correcta, el navegador no muestra ningún error, ¿alguien puede ayudarme, por favor?
function Abstract() { let images = [...document.querySelectorAll('.img')]; images.forEach((img, idx) => { img.style.backgroundImage = `url(../images/${idx+1}.jpeg)` }) return ( <div className="slider"> <div className="slider-inner"> <div className="item"> <div className="img"> </div> </div> <div className="item"> <div className="img"> </div> </div> <div className="item"> <div className="img"> </div> </div> </div> </div> ) }Debido a la forma en que funciona React , generalmente es una mala práctica (hay excepciones, según la causa) usar métodos DOM nativos para verificar y actualizar los elementos. Se enredará con la forma en que React administra las actualizaciones de estado/DOM, y el resultado es un componente que no funciona como descubrió.
Idealmente, necesita una matriz de nombres de imágenes que pueda map para producir el JSX que devuelve su componente.
Este es un ejemplo de trabajo basado en su código, pero he realizado cuatro modificaciones.
He creado una matriz de nombres de imágenes.
Creé un componente principal para Abstract y pasé la matriz del elemento principal a Abstract como accesorio. (Nota: esto no era completamente necesario, podría haber declarado la matriz en Abstract pero esto parecía más apropiado).
En Abstract , map sobre la matriz para crear una img para cada elemento con una clase específica basada en su nombre ( image image1 etc.).
Uso CSS para definir la información de la imagen de fondo (aquí he usado imágenes ficticias).
const { useState } = React; // Pass in the images array as a prop // `map` over the array to create some images // adding a new `className` to the image using the image name function Abstract({ images }) { return ( <div> {images.map(src => { const cn = `image ${src}`; return <img className={cn} /> })} </div> ); } const images = ['image1', 'image2', 'image3']; // Pass in the images array as a prop to `Abstract` function Example({ images }) { return <Abstract images={images} /> } ReactDOM.render( <Example images={images} />, document.getElementById('react') ); .image { width: 100px; height: 100px; } .image1 { background-image: url('https://dummyimage.com/100x100/666/ff0'); } .image2 { background-image: url('https://dummyimage.com/100x100/999/ff0'); } .image3 { background-image: url('https://dummyimage.com/100x100/222/ff0'); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>Tal vez intente:
let idx=1 return ( <div class="slider"> <div class="slider-inner"> <div class="item"> <div class="img" style="background-image: `url(../images/${idx++}.jpeg)`"> </div> </div> // repeat 3 times </div> </div> )