diegomura / react-pdf

📄 Create PDF files using React
https://react-pdf.org
MIT License
14.63k stars 1.16k forks source link

Image caching causes wrong images to be shown for Buffer source #1805

Open wyozi opened 2 years ago

wyozi commented 2 years ago

Describe the bug Cache key creation (https://github.com/diegomura/react-pdf/blob/6ea172340b0e89b01a985e91eee257c43b243c54/packages/image/src/resolve.js#L160) is invalid for Buffer sources; a node.js Buffer has neither .data nor .uri, so cacheKey is always undefined and thus the first cached image will be reused for subsequent pdf renders.

To Reproduce

  1. Pass a Buffer to <Image src={buf}/>

Expected behavior A proper cacheKey is generated for buffers so that images are cached properly (or alternatively caching is disabled for buffers)

Desktop (please complete the following information):

KevLehman commented 1 year ago

A workaround is to pass cache={false} to the Image component when rendering. This will cause that you cannot recycle images, but if you, like in my case, were using totally different images, then that should work.

Would be good also to have a good caching mechanism (apart from a proper caching key). Defaulting the elements in cache to 30 and not cleaning them up is kinda troublesome in node envs with low memory.

emmafielduk commented 1 year ago

Hello, I am also having caching issues with images, where the image at src is a cached image which was updated a couple weeks ago. A logo is repeated multiple times on every page.

<Image src={src} />
<Image src={src} cache={false} />
<Image src={{ uri: src, method: 'GET', body: '', headers: {} }} />
<Image src={{ uri: src, method: 'GET', body: '', headers: {} }} cache={false} />

Alll of the above implementations return the old image. How long does this cache last, and how can I reset the cache?

I have tried with versions 2.3.0 and 3.1.9

Thanks Diego :)

AgostinhoMayoral commented 5 months ago

I had the same problem and managed to solve it definitively by configuring cache control, pragma and expirations in the headers.

<Image
          style={styles.image}
          src={{
            uri: data.logoImagePath,
            method: "GET",
            body: "",
            headers: {
              "Cache-Control": "no-cache, no-store, must-revalidate",
              Pragma: "no-cache",
              Expires: 0,
            },
          }}
          cache={false}
/>