image is not rendering in image removed when pdf downloaded

[itsshajad]

[oliversentact]

The title is confusing and there is no information but I am having this same problem.

I am including an image in an <img /> tag that displays well in my component. Then when I click the download button, the layout still holds but there is no image, just empty space.

Are we able to include images in our PDFs?

[crscaballero]

The title is confusing and there is no information but I am having this same problem.

I am including an image in an <img /> tag that displays well in my component. Then when I click the download button, the layout still holds but there is no image, just empty space.

Are we able to include images in our PDFs?

I'm having the same problem

[Tushar-Yadav-TCPL]

I am also facing same issue.

[SinaSaintZero]

Same issue

[Amaka202]

hello, @SinaSaintZero @Tushar-Yadav-TCPL @crscaballero @oliverterrell @itsshajad I am currently experiencing this and wanted to know if any of you were able to find a solution? 🙂

[oliversentact]

@Amaka202 Unfortunately I was not. Due to time constraints I had to pivot to another library instead of taking a ton of time to figure this issue out. I used react-pdf https://react-pdf.org/ instead, which was workable. I don't like react-pdf because it doesn't let you use anything but its own component library, which is super inconvenient and consumes a lot more time than using any old JSX, but with that said it really is a powerful library

[abdullahqureshi5050]

This is how I fixed it. If your image is from a remote URL it will not show. First allow CORS (if working with different hosted backend and frontend). Then covert your remote url to local url at frontend side. This issue occurs as remote URL takes time to process and pdf is generated before the image is fetched. So you have to make sure the image is loaded before converting to pdf.

 async function fetchImage() {
            const imageUrl = 'https://i.imgur.com/7obGLSR.jpeg';
            if (!imageUrl || imageUrl.length === 0) return;
            try {
                const response = await fetch(imageUrl);

                if (!response.ok) {
                    throw new Error(
                        `Image fetch failed with status: ${response.status}`,
                    );
                }

                const blob = await response.blob();
                const blogToLocalURL = URL.createObjectURL(blob);
            } catch (error) {
                console.error('Error fetching pdf image:', error);
            }
        }

[ivmarcos]

Not sure if that matters now due to the time elapsed, sorry, but on V1 maybe using the imageTimeout option from htm2canvas might be a way out.

import generatePDF, { Options } from 'react-to-pdf'

const options: Options = {
   filename: 'test.pdf',
   overrides: {
       canvas: {
           imageTimeout: 10000
      }
   }
}

const Component = () => {
   const targetRef = useRef();
   return (
      <div>
         <button onClick={() => generatePDF(targetRef, options)}>Download PDF</button>
         <div ref={targetRef}>
            Content to be included in the PDF
         </div>
      </div>
   )
}

[ivmarcos]

Closing this, but feel free to open another ticket if the problem persists with the newest releases.