Existing Issue: Images don't render properly

prof-awais commented 5 months ago

react-to-pdf-svg-bug

Config:

version:  ["react-to-pdf": "^1.0.1", "next": "14.1.0"]
format: PNG

import { Margin, usePDF } from "react-to-pdf";

const { toPDF, targetRef } = usePDF({
    filename: "FileName",
    page: { margin: Margin.MEDIUM },
});

Hi, react-to-pdf initially worked perfectly for me but later I faced PNG image issue. Reason I don't know exactly but my usage is following.

<MuiDialog
        open={showLicense}
        onClose={() => setShowLicense(false)}
        // PaperComponent={PaperComponent}
        aria-labelledby="draggable-dialog-title"
        fullScreen
        scroll="paper"
        PaperProps={{ sx: { overflowX: "hidden" } }}
      >

                {/* App bar goes here  */}

        <MuiDialogContent sx={{ padding: "unset", minWidth: "2100px" }}>
          <section className="av-mx-8" ref={targetRef}>
            <section className="av-space-y-12 av-mb-14">
              <LcShowTitle variant="v1">3D Object License</LcShowTitle>
            </section>

            <LcShowClient
              data={CONTENT_LC_SHOW}
              licenseBinary={data?.binaryData}
              isPDF     // just responsible for conditional with of the sections. 
            />
          </section>
        </MuiDialogContent>
      </MuiDialog>

I have read the following issues but no solution found inside.

Relevant issues:

Please if there is something wrong is usage tell me.

Emanuel-Palestino commented 4 months ago

Same problem with a png image.

prof-awais commented 4 months ago

Same problem with a png image.

On my side they worked in production correctly. No text or image is broken. And in development its on luck.

soham2k06 commented 1 week ago

I would assume you are using <Image /> component by next.js I used normal img tag and it works. Next image is behaving the same you demonstrated

prof-awais commented 1 week ago

I would assume you are using <Image /> component by next.js I used normal img tag and it works. Next image is behaving the same you demonstrated

Maybe I have to try. Because after few months I downloaded license and images were missing. Lol. I've to fix them again.

soham2k06 commented 1 week ago

Pretty sure something is wrong with Image component, and we can remove that since in pdf we do not need any optimisation either

ivmarcos / react-to-pdf

Existing Issue: Images don't render properly #119