My response is array of paths (for images) and looks something like:

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

Using Material-UI I want to display those images in <ImageList>

As far as I know for images, the paths have to be turned into blobs so that images get loaded on the web.

So here's my issue:

How to turn the response that looks array of paths into blobs

here's my get request code

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

the output of console.log("url", url); is

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']

I commented the header {responseType: "blob",} out, as it formed a single blob that doesn't work

code for <ImageList> is

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

edit after removing window.URL.createObjectURL(new Blob( in .push

output

context: API returns multiple full paths in an array, as i have uploaded multiple images for that user, so i want to display those images on his profile