I can't add an image: "img.getAttribute is not a function" (with nextjs)

[Radroggor]

Hi,

When I try to add an image to my PDF Document, I get this error: img.getAttribute is not a function Ref image-component.js:178 : "if (img.getAttribute("alt") === null) {..."

Source :

const MyDocument = () => (
  <Document>
    <Page size="A4" style={styles.body}>
     <Text style={styles.header} fixed>Hello</Text>
     <Image style={styles.image} src='/images/xxx/image.png' alt='my image' width='200' height='200' />
    </Page>
  </Document>
);

I tried different methods to specify the image src: absolute link, relative link, get url, base64, ...

I don't have any CORS errors.

I'm using : @react-pdf/renderer 3.1.13 next 13.5.5 react 8.2.0 next/image

I tried png and jpg images.

I have the impression that the image is not being read correctly. (Note: If I don't add an image, I get a valid PDF)

[jameschetwood]

How are you rendering MyDocument? Are you using one of the methods from the library (ReactPDF.render, ReactPDF.renderToStream)? Or The PDF viewer:

import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';

const App = () => (
  <PDFViewer>
    <MyDocument />
  </PDFViewer>
);

ReactDOM.render(<App />, document.getElementById('root'));

Or are you just using MyDocument as a normal component in NextJS?

[Allan2000-Git]

You need to use Image property provided by '@react-pdf/renderer' Example: <Image style={styles.image} src="/images/quijote1.jpg" />