Not valid image extension

[laclance]

Trying to render an image but always get Not valid image extension. Image renders fine when using normal img component in react.

Tried using require and buffers.

    const logo = require('assets/printLogo.png');

or

useEffect(() => {
    const toBase64 = (file: Blob): Promise<string> =>
      new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => reader.result && resolve(reader.result.toString());
        reader.onerror = error => reject(error);
      });

    async function getFile() {
      const file = new File(['printLogo.png'], 'assets/printLogo.png');
      setLogo(await toBase64(file));
    }

    getFile();
  });

    <Image src={logo} style={{ alignSelf: 'center' }} />

Windows 11 Chrome @react-pdf/renderer": "^3.0.1

[Bryan03122]

Trying to render an image but always get Not valid image extension. Image renders fine when using normal img component in react.

Tried using require and buffers.

    const logo = require('assets/printLogo.png');

or

useEffect(() => {
    const toBase64 = (file: Blob): Promise<string> =>
      new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => reader.result && resolve(reader.result.toString());
        reader.onerror = error => reject(error);
      });

    async function getFile() {
      const file = new File(['printLogo.png'], 'assets/printLogo.png');
      setLogo(await toBase64(file));
    }

    getFile();
  });

    <Image src={logo} style={{ alignSelf: 'center' }} />

Windows 11 Chrome @react-pdf/renderer": "^3.0.1

I have same issue, but I'm trying to display a cloudinary image with .webp extension. I don't know why, but it was working fine, and now I have this error and cannot display the image.

[bernharduw]

I have same issue, but I'm trying to display a cloudinary image with .webp extension. I don't know why, but it was working fine, and now I have this error and cannot display the image.

@Bryan03122 when using Cloudinary there's a simple solution:

Use f_png or f_jpg as the transformation - when set, it ignores the extension completely and sends the requested format. AFAIK React-PDF only supports PNG and JPG formats, definitely no webp. Here are some examples: PNG: https://res.cloudinary.com/demo/image/upload/f_png/actor.webp GIF: https://res.cloudinary.com/demo/image/upload/f_gif/actor.webp

[laljidp]

I'm also having the same issue, Not a valid image extension,

And I'm using jpeg format which also renders on React image component just fine,

It has an issue while I'm using react-pdf <Image src={--src--} /> component to render images on PDF.

My image has been uploaded to the s3 bucket.

Please suggest me some solution.

[abdullah-aj]

+1 I am also facing the same issue, any solution so far?

[hillriegel]

I'm also having this issue.

<Document>
  <Page size="A4" style={styles.page}>
    <View style={styles.leftColumn}>
      <Image src="./sinch_logo.png" />

index.es.js:903 Not valid image extension

[laclance]

yes I have also tried different paths with the png in the public folder but still get same error.

[diegomura]

Images shared above are webp which isn't supported. I'll need a valid PNG image where this is happening to replicate

[Edoardo-Croci]

@diegomura try this screenshot I got today, I tried both png and jpg formats, nothing is working.

This is the code.

<PDFViewer width={"100%"} height={800}>
      <Document>
        <Page size="A4" style={styles.page}>
          <View style={styles.section}>
            <Image src={"google.png"} style={styles.headerImage}></Image>
          </View>      
        </Page>
      </Document>
</PDFViewer>

The styling is: width: 400px, height: 200px

[randbytes]

In my case, nothing worked except public dir(express) with correctly converted png image. "@react-pdf/renderer": "^3.3.7"