search

diegomura / react-pdf

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

Image component fails to render certain images, whereas the regular <img /> tag does render them #2651

Closed mubin86 closed 2 months ago

mubin86 commented 3 months ago

Describe the bug We are encountering an issue with rendering images in our PDF documents. Specifically, certain images are consistently missing from the rendered PDF output, while others render perfectly without any problems. We have attempted to render the images using both the Buffer and valid image URL approaches as outlined in the documentation, but neither method has resolved the issue. Upon attempting to render the images, I saw that it takes up a certain area in the PDF space, but it does not actually render that image. This behaviour is consistent across multiple attempts.

To debug the issue, I pasted the Base64 containing the image into a React playground using a regular <img /> tag, and it appeared and functioned correctly. However, when I pasted the same Base64 into the react-pdf playground https://react-pdf.org/repl, the image failed to appear. It's worth noting that the image size is only 3MB, and there are no CORS issues to account for. Despite these observations, the image still does not render within the react-pdf playground.

Here I am attaching screenshot for your reference.

Screenshot 2024-02-18 at 5 17 08 PM Screenshot 2024-02-18 at 5 29 29 PM

To Reproduce To identify the issue, simply paste the Base64 from here https://drive.google.com/file/d/1lwIPXb7rIlQSB6Fqf-CbZ8DF7T7Wq45Z/view?usp=sharing within a regular <img /> tag in any React playground. Additionally, paste the same Base64 in the https://react-pdf.org/repl react-pdf playground using the custom <Image /> component from the library. This will allow you to easily visualize the problem.

Desktop (please complete the following information):

krishna-404 commented 3 months ago

Duplicate of #2639

dmitryTurov commented 3 months ago

I suppose if an image has geolocation metadata attached jay-peg fails to parse it. opened the related issue https://github.com/diegomura/jay-peg/issues/4

dmitryTurov commented 3 months ago

as a workaround "resolutions": { "@react-pdf/image": "<2.3.2" } to use jpeg-exif instead of jay-peg

upd: still facing issues. next workaround - convert jpeg into png

nikischin commented 2 months ago

I am also facing this issue with any JPEG image in Safari under Mac OS X. Would be happy to see a fix soon, thank you!

"overrides": {
    "@react-pdf/image": "<2.3.2"
},

is unfortunately not working for me and does even break more of the logic. I might also need to convert pictures to png, would be a nice feature for my image service to support, though is not so easy to implement as it does sound.

PelosiTech commented 2 months ago

Add this

"resolutions": { "@react-pdf/layout": "3.6.4", "@react-pdf/textkit": "4.3.0", "@react-pdf/image": "2.2.2", "@react-pdf/pdfkit": "3.1.2" }

Will fix a lot of issues for everyone.

mubin86 commented 1 month ago

@diegomura Still facing this weird issue with the latest version 3.4.2. Its happening for a long time so would you mind taking a quick look into it?

anantbansa1 commented 3 weeks ago

@diegomura Still facing this weird issue with the latest version 3.4.2. Its happening for a long time so would you mind taking a quick look into it?

I am also facing the same issue on version 3.4.4. did you find any solution