1

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

Garabed B.
  • 21
  • 3
  • No need to return blob. If you are receiving full path then it will work for sure. Just remove everything inside the push and it will work `url.push(res.data[i])` – Nikhil G May 21 '22 at 07:43
  • But don't i need objURL so that the path of image gets converted into URL and the browser understands it's an image to be displayed? – Garabed B. May 21 '22 at 07:46
  • output of the URL is now array of arrays of paths so it's not what i want – Garabed B. May 21 '22 at 07:48
  • if the API is returning full path for example: `http://localhost:3000/assets/public/image.jpg` then you do not need to convert. If API returning anything else then you should make changes in you API and make sure you return full path. But no need to this stuff in front end. – Nikhil G May 21 '22 at 07:50
  • Please post the output – Nikhil G May 21 '22 at 07:50
  • url (3) [Array(1), Array(1), Array(1)] inside each Array(1) is the path – Garabed B. May 21 '22 at 07:53

0 Answers0