How can I cache blob image provided by backend (React)?
I have a list of accordions. Every accordion have items that have images.
On accordion click, I fetch items text data and image id to speed up list loading and load images later.
Inside item I use image id to fetch image per item. I get a blob which I convert to URL with URL.createObjectURL(blob)
I use react query, so I can cache and stale request response.
However, even if the request is cached, the image doesn't load instantly after closing and opening accordion, probably because it creates new image URL from blob.
There is even 500ms time fetching per image in image tab in dev tools.
How can I cache this blob image?
Second thing is that it would be nice to not display multiple request in "Fetch/XHR" tab. Maybe there is a way to move it to another tab?
On accordion click, I fetch items text data and image id to speed up list loading and load images later.
Inside item I use image id to fetch image per item. I get a blob which I convert to URL with URL.createObjectURL(blob)
I use react query, so I can cache and stale request response.
However, even if the request is cached, the image doesn't load instantly after closing and opening accordion, probably because it creates new image URL from blob.
There is even 500ms time fetching per image in image tab in dev tools.
How can I cache this blob image?
Second thing is that it would be nice to not display multiple request in "Fetch/XHR" tab. Maybe there is a way to move it to another tab?
Similar Threads
Was this page helpful?
