react-pdf: Image rendering broken for some image since 3.2.0

Describe the bug

We are using react-pdf with 3.1.7. After upgrading @react-pdf/renderer to 3.3.8 we noticed image rendering was broken in some cases. We identified that it broke between the version 3.1.7 and 3.2.0.

To Reproduce Steps to reproduce the behavior including code snippet (if applies):

Go to https://react-pdf.org/repl
Paste in this code:

const Quixote = () => (
  <Document>
    <Page style={styles.body}>
      <Image
        style={styles.image}
        src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2@2x.png"
      />
      <Image
        style={styles.image}
        src="https://posts-swat-io.s3.eu-central-1.amazonaws.com/3e07cc90110d699d18c2793766340a97b9948b09.jpg"
      />
    </Page>
  </Document>
);

const styles = StyleSheet.create({
  body: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
  },
  image: {
    marginVertical: 15,
    marginHorizontal: 100,
  },
});

ReactPDF.render(<Quixote />);

Expected behavior The second image should also be rendered. When opened in the browser it renders fine.

React-pdf version 3.2.0 - 3.3.8

About this issue

Original URL
State: closed
Created 4 months ago
Reactions: 8
Comments: 15 (5 by maintainers)

Most upvoted comments

Extending the above how do we handle these silent errors, we can’t really catch or action these, they are just logs and require manually adressing each image.

Sorry, the above errors are thrown if you have a no height view with a jpeg inside, this was an error on my end, I worked around jpeg images not showing up on mac/adobe reader by just fetching all the image buffers from URL, and using sharp on the serverside to parse them all to pngs, and use the buffer instead of the URL.

const convertImageToPNGBuffer = async (blobUrl: string) => {
    const response = await fetch(blobUrl);
    const imageBuffer = await response.buffer();

    return sharp(imageBuffer)
        .resize({
            fit: "contain",
            width: 700,
        })
        .png({
            quality: 80,
            compressionLevel: 9,
        })
        .toBuffer();
};

This only works if your doing this in serverside as I believe sharp is only available, but other client side conversion exist with a similar idea, this is my workaround for right now.

joelybahh on Mar 5, 2024

@jason-migz, thanks. I tried the files approach but had some issues. We’re running from a monorepo, which might be where the added issue is coming from, I’ll try that approach again later today. Thank you. I appreciate the effort in providing this workaround

joelybahh on Mar 20, 2024

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.

PelosiTech on Mar 12, 2024

Same for me.

A PDF with images will show the images in chrome webview, but the images will disappear in safari or preview (mac). They cannot be opened in Adobe Reader at all.

Have found that it is only png images that will work, we convert all formats to png with sharp and then give them to react-pdf as a buffer. All other methods seems to create a corrupt pdf file.

casperandreassen on Mar 4, 2024

Same same here. Thought I was going mad. Workaround was to temporarily change images to png. 😦

mesh-newbie on Feb 28, 2024

I have the same problem with .jpg images. They are shown in the PDFViewer in Chrome, but not in Safari. After downloading the PDF from the viewer, the no .jpg-images are shown, only .png-images.

Has anyone found a fix for it?

DanielWahl on Feb 28, 2024