Mi respuesta es una matriz de rutas (para imágenes) y se parece a:

 [ "path_of_img1", "path_of_img2", "path_of_img3" ]

Usando Material-UI, quiero mostrar esas imágenes en <ImageList>

Por lo que sé, para las imágenes, las rutas deben convertirse en blobs para que las imágenes se carguen en la web.

Así que aquí está mi problema:

Cómo convertir la respuesta que parece una matriz de caminos en blobs

aquí está mi código de solicitud de obtención

 axios .get( `http://localhost:4000/photographers/portfolio/${id}` // , {responseType: "blob",} ) .then((res) => { console.log(res.data); // const json = JSON.stringify(Object.assign({}, res.data)); // console.log("json", json); let url = []; for (let i = 0; i < res.data.length; i++) { url.push(window.URL.createObjectURL(new Blob([res.data[i]]))); } //const url = window.URL.createObjectURL(new Blob([res.data])); setPortfolio(url); console.log("url", url); }) .catch((err) => { console.log(err); }); }

la salida de console.log("url", url); es

 url (3) ['blob:http://localhost:3000/b6b132a3-f27d-468f-915c-d7d3d8795dcc', 'blob:http://localhost:3000/dddcb681-4df7-426b-bd39-8b73e4cacd2e', 'blob:http://localhost:3000/ac77eccc-53f0-4533-b17e-adea723983e7']

Comenté el encabezado {responseType: "blob",} , ya que formó un solo blob que no funciona

el código para <ImageList> es

 {portfolio.map((item) => { return ( <ImageListItem key={item}> <img src={item} alt={"porfolio"} /> </ImageListItem> ); })} </ImageList>

editar después de eliminar window.URL.createObjectURL(new Blob( in .push

producción

contexto: la API devuelve múltiples rutas completas en una matriz, ya que he subido varias imágenes para ese usuario, por lo que quiero mostrar esas imágenes en su perfil