0
123
VistasMódulo no encontrado en las imágenes
Soy nuevo para reaccionar y tratar de crear un control deslizante. Quiero crear una diapositiva que muestre texto e imagen en la misma diapositiva. La visualización de texto es buena, pero no puedo mostrar correctamente mi imagen. Casi intento todo lo que veo en este foro pero no funciona.
archivo deslizante de datos
import React from 'react'; import one from "./img/first.png" const dataSlider = [ { id: 1, img: {one}, title: "Summer sale", description: "Don't compromise on style! get flat 30% off for new arrivals", bg: "black", }, { id: 2, img:{one}, title: "Winter sale", description: "Don't compromise on style! get flat 30% off for new arrivals", bg: "red", }, { id: 3, img:{one}, title: "Popular sale", description: "Don't compromise on style! get flat 30% off for new arrivals", bg: "blue", }, ]; export {dataSlider};Control deslizante.jsx
<Arrow direction="left" onClick={() => handleClick("left")}><ArrowLeftOutlined /></Arrow> <Wrapper> {dataSlider.map(item =>( <Slide bg={item.bg}> <ImgContainer><Img src={require( `${ item.img }` )} /></ImgContainer> <InfoContainer><Title>{item.title}</Title><Description>{item.description}</Description><Button>shop now</Button></InfoContainer> </Slide> ))} 
El error es: 
·
Santiago Gelvez
2 Respuestas
Responde la pregunta0
Ya que estás usando CRA. Probablemente sería más fácil simplemente agregar sus imágenes a la carpeta public .
Luego, en su dataSlider.js en lugar de importar la imagen, simplemente haga algo como esto:
{ id: 1, img: "/img/first.png", // this will point to `/public/img/first.png` in the implementation title: "Summer sale", description: "Don't compromise on style! get flat 30% off for new arrivals", bg: "black", },Y luego, en su uso, harías esto:
<img src={item.img} />
·
Santiago Gelvez
Denunciar
0
Su import one from "/img/first.jpg" apunta a la raíz de la estructura del directorio. Simplemente elimine la inicial / .
·
Santiago Gelvez
Denunciar
Responde la pregunta