Unknown version

[wymanchung]

Describe the bug I'm using Image component to render from URL object The URL is an application/octet-stream response of a JPG file and it could be saved and opened if downloaded. Console gives Warning: "Unknown version". I've got different version number with different JPG

To Reproduce When the following component is saved as blob

<Image
  src={{
    uri: `/api/frs/fileInfo/${doc.id}`,
    method: "GET",
    headers: {
      ...getAuthHeader().headers,
    },
    body: "",
  }}
/>

Expected behavior The JPG should be embedded in PDF

Error Log Error: Unknown version 47178 at VersionedStruct.decode (http://localhost:3000/static/js/bundle.js:358332:13) at ArrayT.decode (http://localhost:3000/static/js/bundle.js:357070:28) at ArrayT.fromBuffer (http://localhost:3000/static/js/bundle.js:357144:17) at Object.decode (http://localhost:3000/static/js/bundle.js:356206:24) at new JPEG (http://localhost:3000/static/js/bundle.js:298158:65) at getImage (http://localhost:3000/static/js/bundle.js:298253:14) at _callee3$ (http://localhost:3000/static/js/bundle.js:298376:45) at tryCatch (http://localhost:3000/static/js/bundle.js:295263:16) at Generator.<anonymous> (http://localhost:3000/static/js/bundle.js:295351:17) at Generator.next (http://localhost:3000/static/js/bundle.js:295292:21)

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• React-pdf version: v3.4.3

[sntlln93]

Did you fix it somehow? I'm having the same issue. The following gives Unknown version 0

<Image
    src={{
      uri: item.photo,
      method: "GET",
      body: "",
      headers: "",
    }}
    style={styles.photo}
  />

<Image
    src={item.photo}
    style={styles.photo}
  />

item.photo is similar to this blob:http://host/54561466-20cf-49d4-bb1e-325f55b242a2 and it was generated from a jpg uploaded by the user using URL.createObjectURL(uploadedPhoto).

[wymanchung]

@sntlln93 In my case, the jpg blob is recognized by the canvas but not react-pdf. I used some workaround to render the image in a hidden canvas and export image back into a blob

async function convertJpgBlobToCanvasBlob(jpgBlob: Blob): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const img = document.createElement("img");

    img.onload = () => {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      canvas.width = img.width;
      canvas.height = img.height;

      ctx?.drawImage(img, 0, 0);

      canvas.toBlob((canvasBlob) => {
        if (canvasBlob) {
          resolve(canvasBlob);
        } else {
          reject(new Error("Failed to convert image to canvas blob."));
        }
        canvas.remove();
      }, "image/jpeg");
    };

    img.onerror = () => {
      reject(new Error("Failed to load image."));
    };

    img.src = URL.createObjectURL(jpgBlob);
  });
}

So the final output would be something like this

<Image
  src={FrsFileService.downloadFile(id).then((data) => {
    return convertJpgBlobToCanvasBlob(data);
  })}
/>

[sntlln93]

I see, thank you. In my case I was on a rush so I ended up using react-to-print instead of react-pdf.