0

I have a react component where I show an image using img tag ----> <img src={url} className="avatar"></img>

The component gets mounted when I click a specific button and gets unmounted when I click someplace else (Basically it works like a popover). So the issue is that whenever this component is mounted, the image from the url is downloaded again, not used from cache.

Q1: So what modifications do I need to load it from cache?

Q2: Do I need to write a caching mechanism to achieve this?

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
iamsaksham
  • 2,879
  • 4
  • 26
  • 50
  • 2
    1. It's possible it doesn't get loaded from cache only because you have dev tools running, and would load from cache otherwise, but 2. make sure the server sends proper HTTP headers thad don't make it uncacheable – pawel Mar 08 '17 at 10:21
  • @pawel I'm sure its not related with dev tools because, it loads from cache in other cases. Might be issue with HTTP headers. Lemme revisit the issue. Anyway thanks for a hint – iamsaksham Mar 08 '17 at 10:34

1 Answers1

1

Once an image has been loaded(in any way) into the browser, it will be in the browser cache and will be loaded much faster the next time it is used, whether that use is in the current page or in any other page as long as the image is used before it expires from the browser cache.

Also as @pawel mentioned, please make sure the server sends correct HTTP headers. I don't know what type of server hosts your images, but here is an example how to enable image caching in Apache.

Credits:

  1. How do you cache an image in Javascript
  2. Website image caching with Apache
Community
  • 1
  • 1
Jordan Enev
  • 16,904
  • 3
  • 42
  • 67
  • Yeah, gotcha!! It is some issue with the headers. I was using this image `https://wallpaperbrowse.com/media/images/cat-1285634_960_720.png` it got loaded multiple times, but putting this image on my cdn did the job!! Now its used from cache – iamsaksham Mar 08 '17 at 10:56
  • Thanks to @pawel! :) – Jordan Enev Mar 08 '17 at 10:58