Issue rendering images via <Image> component

I have been unable to correctly load images via the <Image src /> component in React PDF.

I had issue locally in my code but have also been able to replicate the same issue on the image test page https://react-pdf.org/repl?example=images

This works and renders (test image) https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg <Image src="https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" />

This will not render (test image) https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png <Image src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png" />

Is there something that the <Image> component needs to support this?

The images I wish to load for my project will be PNG but these look to be supported.

Any help would be greatly appreciated

Issue Analytics

State:
Created 3 years ago
Comments:34 (2 by maintainers)

Top GitHub Comments

30reactions

himanshusandhacommented, Jul 7, 2021

I had the same CORS issue while accessing image stored in S3 bucket, I was able to access the image in normal img tag of browser but when the React-PDF tried to render it was throwing CORS error. Passing "Cache-Control": "no-cache" in Header worked for me

i.e while mentioning URL in Image tab of React-PDF instead of assigning URL directly to src attribute I made call as below <Image src={{ uri: _your_image_url_goes_here_, method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} /> and it worked.

10reactions

roshangm1commented, Jul 4, 2020

This has been here for a while and it’s the issue with react-pdf. @diegomura