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?
2 Replies
i know im late here but you could probably display:none the image instead of completely not rendering it
and then you can get fancier by not rendering most images, display: none'ing ones that you think are likely to get clicked next, and rendering the ones the users expect to see normally
I asked backend to give me images in base64 format instead of the blob and this way there are properly cached because base64 is always the same and URL.createObjectURL(blob) always produces new url.
It would be the best to have images in just ULR format would be the best , but unfortunately, frontend doesn't have permissions to image's storage in my project right now and I have to deal with backend serving me images directly.