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

[Md. Mubinur Rahman]

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.

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):

• OS: MacOS 13.0
• Browser chrome
• React-pdf version 3.3.8

[krishna404]

Duplicate of #2639

[Dmitry]

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

[Dmitry]

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

[Tim Nikischin]

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.

[Carlo Pelosi]

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.

[Md. Mubinur Rahman]

@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?

[Anant]

@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

[jc-wow]

yes, I encounted the same problem in version 2.5.0, I replaced Image component with normal img tag, it works!

[Md. Mubinur Rahman]

Applied this small workaround(convert jpeg into png) to get rid of this issue and it works:

 const resizeImage = (img: HTMLImageElement, maxWidth: number, maxHeight: number) => {
    const canvas = document.createElement('canvas');
    let width = img.width;
    let height = img.height;

    if (width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
    }

    if (height > maxHeight) {
        width *= maxHeight / height;
        height = maxHeight;
    }

    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, width, height);

    return canvas;
 };           

 const maxWidth = 1000;
 const maxHeight = 800;
 const resizedCanvas = resizeImage(tempImage, maxWidth, maxHeight);

 // This is the converted png format
 const pngDataUrl = resizedCanvas.toDataURL('image/png', 0.8);

[Coren "Kern" Frankel]

I am also still encountering this problem in version 3.4.2 and 3.4.4. So far, I haven't benefited from anyone's workarounds.