React-pdf: Issue rendering images via <Image> component

[grantburnham]

I have been unable to correctly load images via the 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

This will not render (test image)
https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png

Is there something that the 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

[kaloraat]

I am having same issue. Can't display image at all.
Tried the docs but its very confusing. Where how are we supposed to use this in Image component?
From the docs:
{ uri: valid-url, method: 'GET', headers: {}, body: '' }

This is Image componet. What does docs trying to say??

Use this way. Of course it does not work.
<Image { uri: valid-url, method: 'GET', headers: {}, body: '' } />`

[studio-blueboat]

I'm also having this issue.
I can load the wikipedia image you've mentioned above @grantburnham through the src prop but am unable to load another external image, say this one. https://positivewomen.org.au/wp-content/uploads/2019/11/PWV_hero4.5_sm.jpg

[grantburnham]

@studio-blueboat I know, seems illogical really, as I can't see anything that should stop it from loading and nothing in the docs seems to point to any restrictions.

[jyenes]

I have exactly the same issue trying to load images from firebase, only local ones work.

[vsachini]

I'm having the same issue here getting images from S3

[jyenes]

I wonder if there is any way to pre-load the images on memory to workaround this issue.

[sterp]

May be just me but I'm having issues using both PDFViewer or download with local and remote images. Haven't tried Firebase hosted images.

[jyenes]

I have downgraded the version to 1.6.9 and I managed to get the images on the PDF, hope that help

[studio-blueboat]

@grantburnham I'm also having issues with local .png images, specifically the following image and others rendered out of AI in a similar manner.

Edit: Ok now i'm running some experiments and I can't get this image to work either even as a local .jpg.

However Grant your wikipedia image is still working fine. I have a feeling it's something to do with the type of images loaded as opposed to the source being online or local.

[danielbyun]

adding ?noCache={randomString} and configuring CORS does not work for me for rendering S3 images. Trying to figure out if there's anything the server can do regarding the signature and the key when sending the S3 URL.

However, copying and adding image URL from Unsplash work flawlessly.

[grantburnham]

@studio-blueboat I also thought it may be to do with image type, but docs look to support a good image range. I tried local and remote .jpg, .png, but can rarely get one to display, again tried loading local image but this still wouldn't render.

[grantburnham]

I have noticed that images I am trying to load which are failing seem to be failing due to CORS (see loading google image below via console logs)

Access to XMLHttpRequest at 'https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x.png' from origin 'https://react-pdf.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

The Wikipedia images isn't throwing the same error and will load successfully.

This may be the issue why we can't see the images, maybe we can see if others are finding the same.

[Jakku7]

Anyone was able to fix it or find a workaround? I tried downgrading to version 1.6.9 but it still doesn't work.

[roshangm1]

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

[Jakku7]

I am having same issue. Can't display image at all.
Tried the docs but its very confusing. Where how are we supposed to use this in Image component?
From the docs:
{ uri: valid-url, method: 'GET', headers: {}, body: '' }

This is Image componet. What does docs trying to say??

Use this way. Of course it does not work.
`

You need to pass an object to the src/source prop. So in this case it should be like that:
<Image src={ uri: "", method: "", headers: "", body: "" } />

It's better to pass a function that would return an object though. Like that:

<Image src={ returnSrc()} />

function returnSrc() {
  const path = "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" as const;
  const selectedMethod = 'GET' as const;
  return { uri: path, method: selectedMethod, body: '', headers: '' }; 
}

I figured out that the bug lies in the image size. Source is not important. I uploaded Wikipedia image on S3 and it worked. Then I resized one of the images that didn't work previously to 800x600 and it also started to work.

[danielbyun]

@Jakku7

That's very interesting... I copied and hard-coded one of the pre-signed URLs from the S3 bucket and was able to render it no matter what the size was... but as soon as I make it so that it's a URL it seems to break.

[roshangm1]

Also, I was trying this with firebase hosted images. It wasn't working at all. And then installed this extension called "CORS Everywhere" in firebase. After enabling that, it started working. But configuring same cors setting in firebase.json doesn't work.

[roshangm1]

Another finding, along with the size of the image, I can confirm that it's issue with the CORS. So, firebase.json didn't work but for images in firebase storage, this worked. Configuring cors for gcloud storage.

https://firebase.google.com/docs/storage/web/download-files#cors_configuration

[jamigibbs]

I'm running into this same issue with an S3 hosted image. It's definitely a CORS issue. I'm not able to configure the server to allow for this to work so the only other way I'm seeing is to proxy the request with my own server. You can test this out with something like cors anywhere and route your image like this:

https://cors-anywhere.herokuapp.com/http://example.com/your-image.png

[AwolDes]

@jamigibbs did S3s CORS policies help at all here? Having a similar issue to what you're experiencing and wondering if it's worth a shot

Edit: Success! :tada:

I created a bucket with public access (it will act as a CDN), uploaded my image and making sure it was publicly accessible.

Then I added the following CORS configuration

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Worked like a charm.

[jamigibbs]

@AwolDes In my case I did not have image files to upload. I needed to use a direct link to an S3 server where they lived and I did not have access to those settings either. Sounds like a good workaround in your case though.

[danielbyun]

@Jakku7 's solution above worked for me! Made the bucket public for CORs and set the uri to the full image's URL.

[alanmaranto]

@jamigibbs did S3s CORS policies help at all here? Having a similar issue to what you're experiencing and wondering if it's worth a shot

Edit: Success! 🎉

I created a bucket with public access (it will act as a CDN), uploaded my image and making sure it was publicly accessible.

Then I added the following CORS configuration

<CORSConfiguration>
 <CORSRule>
   <AllowedOrigin>*</AllowedOrigin>
   <AllowedMethod>GET</AllowedMethod>
 </CORSRule>
</CORSConfiguration>

Worked like a charm.

This worked perfect for me !!
Thanks