question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue rendering images via <Image> component

See original GitHub issue

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:closed
  • Created 3 years ago
  • Comments:34 (2 by maintainers)

github_iconTop 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Rendering image in react component - Stack Overflow
I have an object which have a key 'image' which return the file name (ie: 'filename.jpg'). As stated before, the images are stored...
Read more >
How to Render Images in a React App | by Carlie Anglemire
When I first started to render images in a React application, I remember being mystified about why an image might have to be...
Read more >
Solved: Overlayed Image Component(V1) not rendering ...
Overlayed Image Component(V1) not rendering Images with extra .html in the AEM 6.5.3 publish environment.
Read more >
Displaying images with the React Native Image component
Dive into the basic functions, properties, and limitations of the React Native Image component with this quick, powerful tutorial.
Read more >
Building an effective Image Component - Chrome Developers
# Unsized images hurt CLS ... The width and height should be set such that the aspect ratio of the rendered image is...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found