Hice un archivo #JS llamado SliderImgs y puse una matriz de objetos en el que incluye las propiedades de las imágenes de un control deslizante:
const Images=[ { src:'./files/new-banner-high.jpg', alt:'banner', order:'0' } ] export default ImagesLuego importé esta matriz a un componente y luego la pasé (la matriz) de accesorios a otro componente llamado Slider
import React, { Component } from 'react' import Images from './SliderImgs' import Slider from './Slider' class Body extends Component { render() { return ( <div> <div className="slider"> <Slider pictures={Images}/> </div> </div> ) } } export default Bodyy finalmente traté de imprimir la imagen en la pantalla usando el método map(), pero obtuve este error: Error no detectado: no se puede encontrar el módulo './files/new-banner-high.jpg'
import React, { Component } from 'react' class Slider extends Component { constructor(props){ super(props); this.state ={ pictures:[] } } static getDerivedStateFromProps(props, state){ return {pictures : props.pictures } ; } render() { return ( <div className="slidercontainer"> {this.state.pictures.map((picture, index)=> { return( <img src={require(picture.src)} alt={picture.alt} key={index} /> ) })} </div> ) } } export default SliderNormalmente, las imágenes deben mantenerse en la carpeta pública.
files a la carpeta public . const Images=[ { src:'/files/new-banner-high.jpg', alt:'banner', order:'0' } ]img como se muestra a continuación. <img src={picture.src} alt={picture.alt} key={index} />