Estoy tratando de mapear a través de una lista de imágenes svg y mostrar suficiente descripción correspondiente a la imagen svg.
índice.js
import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg"; import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg"; import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg"; const data = [ { id: `1`, title: "Coming soon", description:'', img: Pic1, }, { id: `2`, title: "Coming soon", description:'', img: Pic2, }, { id: `3`, tile: "Coming soon", description:'', img: Pic3, }, ] function Test() { return ( {data.map(({ id, title,description, img }) => ( <div key={id} className="guest--item swiper-slide"> <div> <img key={id} src={img} alt='mySvgImage' /> <h1>{title}</h1> <h2>{description}</h2> </div> </div> ))} )}actualmente, cuando reviso mi sitio web de reacción, solo puedo ver mySvgImage, que es el alt 3 veces y no puedo ver la imagen real
Está importando SVG's como React Component , por lo tanto, debe usarlos como Componente en sí.
En su código, está pasando un React Component (SVG que importó como componente React) como un atributo src a una etiqueta <img> que no es válida.
import React from "react"; import ReactDOM from "react-dom"; import {ReactComponent as Pic1} from "../../../../assets/buyer-1.svg"; import {ReactComponent as Pic2} from "../../../../assets/buyer-2.svg"; import {ReactComponent as Pic3} from "../../../../assets/buyer-3.svg"; const data = [ { id: `1`, title: "Coming soon", description: "", Image: Pic1 }, { id: `2`, title: "Coming soon", description: "", Image: Pic2 }, { id: `3`, tile: "Coming soon", description: "", Image: Pic3 } ]; function Test() { return ( <> {data.map(({ id, title, description, Image }) => ( <div key={id}> <div> <Image /> {/* Use Image as Component */} <h1>{title}</h1> <h2>{description}</h2> </div> </div> ))} </> ); }Porque estás importando tus imágenes de forma incorrecta. Hice este CodeSandbox funcional que es exactamente igual que su ejemplo. Verifique cómo importé imágenes y funciona bien. CódigoSandbox