I have following code.

    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>
    );

I am trying to show for each format relevant image, but it's not working, please help me to fix this broken image error. I try even like this src=require(./assets/${o.ext.substring(1)}.png).default} , but it's not helped.

Thanks.