Tengo el siguiente código .

 const documents = [ { id: 309, name: "sample.pdf", hash: "ce01b860a0b92750d922e900a5a8800c", ext: ".pdf", mime: "application/pdf", url: "https://realestream.nyc3.digitaloceanspaces.com/ce01b860a0b92750d922e900a5a8800c.pdf", }, { id: 165, name: "mortgage_financing.png", hash: "fe4b75488e35c6f84baf428f7043522e", ext: ".png", mime: "image/png", url: "https://realestream.nyc3.digitaloceanspaces.com/fe4b75488e35c6f84baf428f7043522e.png", }, { id: 310, name: "wordFile.docx", hash: "5c8034f2ed8f8bebbb3cfdceadab8123", ext: ".docx", mime: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", url: "https://realestream.nyc3.digitaloceanspaces.com/5c8034f2ed8f8bebbb3cfdceadab8123.docx", } ]; return ( <div className="App"> {documents.map((o) => ( <div> <a href={o.url} target="_blank" rel="noreferrer"> {o.name} </a> <img src={`./assets/${o.ext.substring(1)}.png`} alt="file" /> </div> ))} </div> );

Estoy tratando de mostrar una imagen relevante para cada formato, pero no funciona, ayúdame a corregir este error de imagen rota. Intento incluso así src=require( ./assets/${o.ext.substring(1)}.png ).default} , pero no ayuda.

Gracias.