Orientation of some images is incorrect

[aen1gma]

Describe the bug Some images are rendered with the incorrect orientation (i.e. rotated 90 CCW)

To Reproduce Try to render this file

Expected behavior The image should be rendered the same way as when you open the file in an image viewer

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• React-pdf version 9.1.1
• React renderer version 4.1.3

[aen1gma]

Is there anyone who could provide some insight on this? I've taken a look at the EXIF data and I can't see any difference between this photo and another that is oriented correctly

[diegomura]

I spent the last hour trying to figure it out and I actually don't know. EXIF orientation is being correctly decoded, and in the PDF the image has correct dimensions. Seems to be something on how it's encoded that makes it render incorrectly. JPEG viewers seems to be understanding it, but couldn't figure out what it is. I'll leave this open in case someone else with more experience on JPEG format knows. I recommend re-encoding the image

[giancarlo-cf]

I encountered the same issue in a Next.js project. I noticed a brief flicker of the correct image during hot reloading, which led me to this workaround:

// ...
const [data, setData] = useState<DataInterface | null>(null);
useEffect(() => {
    // ... 
    setData(data);
    setTimeout(() => { setData(null); setTimeout(() => { setData(data) }, 1) }, 1);
}, []);

return (
    {data &&
        (<PDFViewer>
            <Document>
              <Page>
                <View>
                  <Image src="https://example.com/image.jpg" />
    // ...
);

The trick seems to be conditionally rendering the PDF and triggering a second render.

Without the workaround:

With the workaround:

Please ignore the red numbered circles as they are absolute-positioned and placed on top of the image.

[aen1gma]

@giancarlo-cf thank you, this workaround worked for me too

[easis]

Any updates on this? I'm generating a PDF with many photos (retrieved from the backend), and some of them have the wrong orientation.

I'm creating the PDF from a Next.js API route, so I can't use the workaround suggested by @giancarlo-cf.