La URL de item.image proviene de la API, pero cuando intento mapear en la etiqueta <a>
, funcionará bien, que es para el ícono de descarga, pero para el ícono de vista, abrirá el mismo archivo.
data.map(item => { return <> <Modal open={open} onClose={onCloseModal} center> <div className="modalContent"> <iframe src={item?.image}> </iframe> </div> </Modal> <a href={item?.image} target="_blank" download > <span className="IconBoc"> <AiOutlineDownload /> </span> </a> </> })
Debería usar <img>
en lugar de <iframe>
.
Los iframes son para incrustar otros sitios web en su sitio web.
Para los medios ya existen etiquetas como <img>
o <video>
.
Probar:
data.map(item => { return <> <Modal open={open} onClose={onCloseModal} center> <div className="modalContent"> <img src={item?.image} /> </div> </Modal> <a href={item?.image} target="_blank" download > <span className="IconBoc"> <AiOutlineDownload /> </span> </a> </> })