PDF images only render in the browser

[ReiterBaier]

Before you start - checklist

• [X] I followed instructions in documentation written for my React-PDF version
• [X] I have checked if this bug is not already reported
• [X] I have checked if an issue is not listed in Known issues
• [X] If I have a problem with PDF rendering, I checked if my PDF renders properly in PDF.js demo

Description

I am using react-pdf in my REACT project, where I render a list of products in PDF where each product has an image. This works perfectly, but if I don't open the PDF in the browser, whether through Adobe Reader or WhatsApp or any other tool, the images are not rendered.

PDF open with a browser:

PDF opened by another reader:

Steps to reproduce

I use PDFDownloadLink to call my PDF Page on ReportProducts

<PDFDownloadLink document={<ReportProducts data={rows}/>} fileName='Atacadão-Bike-Catalogo'
onClick={()=> setLoadingProgressPdf(false)}
>
{({loading}) => (loading ? <Button variant="contained" color="error">Gerando PDF...</Button> : <Button variant="contained" color="error">Pronto! Clique para baixar</Button> )}
</PDFDownloadLink>

 export const ReportProducts: React.FC<ReportProductsProps> = ({ data }) => {

  const backendApi = 'http://localhost:3000/images?url='

  const imageBase64 = (url: string) => {
    const imageService = new ImageService();

    const imageBase64 = imageService.getImageByUrl(url);
    return imageBase64
  }

   const batchSize = 10000;
   const itemsPerRow = 4;
   const rowsPerPage = 3;
   const itemsPerPage = itemsPerRow * rowsPerPage;

   const renderBatchPages = (startIdx: number, endIdx: number) => {
     const pages = [];

     for (let pageIndex = startIdx; pageIndex < endIdx; pageIndex++) {
       const startIndex = pageIndex * itemsPerPage;
       const endIndex = Math.min((pageIndex + 1) * itemsPerPage, data.length);

       pages.push(
           <View style={styles.container}>
             <View style={styles.row}>
               {data.slice(startIndex, endIndex).map((item, index) => (
                 <View style={styles.item} key={index}>
                   {/* <Image style={styles.image} src={backendApi+item.imageLink}/> */}
                   {/* <Image src={{ uri: backendApi+item.imageLink, method: "GET", headers: { "Content-type": "application/octet-stream" }, body: "" }} /> */}
                   <Image style={styles.image} src={imageBase64(item.imageLink)}/>
                   <Text style={styles.text}>{convertNumberToReal(item.price)}</Text>
                   <Text style={styles.skuText}>{'Código: ' + item.magentoSku}</Text>
                   <Text style={styles.descriptionText}>{item.description}</Text>
                 </View>
               ))}
             </View>
           </View>
       );
     }
     return pages;
   };

   const renderAllPages = () => {
     const totalBatches = Math.ceil(data.length / batchSize);
     const pages = [];

     for (let batchIndex = 0; batchIndex < totalBatches; batchIndex++) {
       const startIdx = batchIndex * batchSize;
       const endIdx = Math.min((batchIndex + 1) * batchSize, data.length);

       pages.push(...renderBatchPages(startIdx, endIdx));
     }

     return pages;
   };

   return <Document><Page> {renderAllPages()}</Page> </Document>;
 };

### Expected behavior

render the images on file

### Actual behavior

just render on browser after the pdf being generated

### Additional information

_No response_

### Environment

- **withour browser**:
- **3.3.8**:
- **18.2.0**:

[ekoessel]

I encounter the same issue. Are there any fixes/workarounds yet?

[ekoessel]

Maybe this will help someone: For us, the error only occurs with .JPG image formats. After we have converted the images to .PNGs, the download and the display magically work without any problems. 🙂

(before that we got error code 110 in Acrobat/Acrobat Reader)

[wojtekmaj]

It looks like you confused React-PDF with @react-pdf/renderer. Please file an issue in their repo instead.