Image not rendering in react-pdf?

[siamahnaf]

I am using react-pdf. I write one component Named MyDoc-

<Document>
    <Page size="A4">
        <View style={styles.Header}>
            <Image style={styles.image} src="https://jobsicle.org/images/jobseekers/16462432893850.jpg" cache={false} />
            <View style={styles.profileNameContainer}>
                <Text style={styles.profileName}>Jannat</Text>
                <View style={styles.profileDivider} />
                <Text style={styles.profileJob}>Full Stack Developer</Text>
            </View>
        </View>
    </Page>
</Document>

Here I am facing problem with rendering image. This is a tricky problem. When I put this url- https://jobsicle.org/images/jobseekers/16462432893850.jpg it do not show the image like flowing.

But when I put this link - https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg in Image src. It works perfectly.

Then what going wrong on the first image. Anybody can help me.

[chrblabla]

Hi @siamahnaf198,

I had the same issue and it comes down to CORS. Check your console in the browser when rendering and look out for something like "Failed to load resource: Origin https://xxxxxx is not allowed by https://yyyyyy Access-Control-Allow-Origin.".

Cheers,

• Chris

[chrblabla]

@siamahnaf198

A solution which worked for me was the following:

I had the same CORS issue while accessing image stored in S3 bucket, I was able to access the image in normal img tag of browser but when the React-PDF tried to render it was throwing CORS error. Passing "Cache-Control": "no-cache" in Header worked for me

i.e while mentioning URL in Image tab of React-PDF instead of assigning URL directly to src attribute I made call as below <Image src={{ uri: _your_image_url_goes_here_, method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} /> and it worked.

Originally posted by @himanshusandha in https://github.com/diegomura/react-pdf/issues/929#issuecomment-875626064

[nischalp444]

@chrblabla I am using s3 and I am still not able to access the database. My CORS permission in s3 looks like the code block below [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "PUT", "POST", "HEAD", "DELETE" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [], "MaxAgeSeconds": 3000 } ]

I also tried to do the method that you mentioned, and I am still not able to access the image. Is there anything else that you think could be the problem?

[chrblabla]

@nischalp444 your CORS settings look fine to me, but what do you mean by "not able to access the database"?

[arslantalib12]

It works for me. <Image src={${Image Source}} />. add img source in some const and then call it in image source with backticks.

[hedge-talha]

Hi , i am having an issue where my previous code worked fine but updating node version made an issue with react-pdf. Now this is a normal image. <Image style={{ width: "100px" }} src={logo} /> And this i button to download pdf: ` {({ loading }) => loading ? (

{/* */}

Loading Document...

                      ) : (
                        <div >
                          <img
                            src={ExportIcon}
                            alt="export icon"

                          />
                          <h4 >
                            Export PDF
                          </h4>
                        </div>
                      )
                    }`

So it keeps showing loading document as there is a problem in pdf code. But when i remove all the images, it starts to work fine. Any solution??

[bastiampos]

Hi, i have the same issue. I dont know how to render the image. I put a url in src but this <Image src={{ uri: _your_image_url_goes_here_, method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} /> isn't working. Someone have a solution?

[YamatoDX]

faced the same problem, anyone got any solution for this ?

[Rouseta]

I am facing the same problem, I am not able to render images, it doesnt´t matter if it is an url or a saved image. Someone got a solution? I have tried all the commented solutions above and no success til now. Looking forward to read you!

[jhunexjun]

If you are looking for a fix wherein <Image /> source not coming from a http and that the source is base64, check this answer: https://github.com/lindell/JsBarcode/issues/337#issuecomment-1482755112

[Sameer1122]

I was having the same issue and all I have to allow the cors in my sharing resource azure blob. If anyone facing issues with the URL images, like from an s3 bucket, azure blob storage, etc you can go there and in the cors or sharing center to allow the cors origin, that will work like a charm,

[Nutriadmin]

Please check #2340 for how I've solved this issue by making my server convert images to base64. This will work even when loading images from an external website that has a CORS policy you cannot control.

[Dagwal]

change it to base64 and use it like this <Image src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAcHBwcIBwgJCQgMDAsMDBEQDg4QERoSFBIUEhonGB0YGB0YJyMqIiAiKiM...... it works

[JuanmeGarcia]

@siamahnaf198

A solution which worked for me was the following:

I had the same CORS issue while accessing image stored in S3 bucket, I was able to access the image in normal img tag of browser but when the React-PDF tried to render it was throwing CORS error. Passing "Cache-Control": "no-cache" in Header worked for me i.e while mentioning URL in Image tab of React-PDF instead of assigning URL directly to src attribute I made call as below <Image src={{ uri: _your_image_url_goes_here_, method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} /> and it worked.

Originally posted by @himanshusandha in #929 (comment)

I am using nextjs 13 and it works fine too even using a local image. I was struggling making it work but it seems that it is a viable solution: My code:

export default function PDF() {
  return (
    <Document>
      <Page>
        <Text>Hello world</Text>
        <Image src={{ uri: '/mano-movil.png', method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} 
        />
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit nam, ipsam aut mollitia accusamus aliquam, impedit, hic nisi quam temporibus dolores eos. Tempore vero perferendis aliquid, reprehenderit minus sapiente?
        </Text>
      </Page>
    </Document>
  )
}

[cmakride]

@siamahnaf198 A solution which worked for me was the following:

I had the same CORS issue while accessing image stored in S3 bucket, I was able to access the image in normal img tag of browser but when the React-PDF tried to render it was throwing CORS error. Passing "Cache-Control": "no-cache" in Header worked for me i.e while mentioning URL in Image tab of React-PDF instead of assigning URL directly to src attribute I made call as below <Image src={{ uri: _your_image_url_goes_here_, method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} /> and it worked.

Originally posted by @himanshusandha in #929 (comment)

I am using nextjs 13 and it works fine too even using a local image. I was struggling making it work but it seems that it is a viable solution: My code:

export default function PDF() {
  return (
    <Document>
      <Page>
        <Text>Hello world</Text>
        <Image src={{ uri: '/mano-movil.png', method: "GET", headers: { "Cache-Control": "no-cache" }, body: "" }} 
        />
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta reprehenderit nam, ipsam aut mollitia accusamus aliquam, impedit, hic nisi quam temporibus dolores eos. Tempore vero perferendis aliquid, reprehenderit minus sapiente?
        </Text>
      </Page>
    </Document>
  )
}

using nextjs 13 appRouter, and this solution worked great thank you!

[enmanuelrondon1]

Estoy usando reaccionar-pdf. Escriba un componente llamado MyDoc-

<Document>
    <Page size="A4">
        <View style={styles.Header}>
            <Image style={styles.image} src="https://jobsicle.org/images/jobseekers/16462432893850.jpg" cache={false} />
            <View style={styles.profileNameContainer}>
                <Text style={styles.profileName}>Jannat</Text>
                <View style={styles.profileDivider} />
                <Text style={styles.profileJob}>Full Stack Developer</Text>
            </View>
        </View>
    </Page>
</Document>

Aquí tengo un problema con la representación de la imagen. Este es un problema complicado. Cuando pongo esta URL: https://jobsicle.org/images/jobseekers/16462432893850.jpg no muestra la imagen como si fluyera.

Pero cuando pongo este enlace: https://static.vecteezy.com/packs/media/components/global/search-explore-nav/img/vectors/term-bg-1-666de2d941529c25aa511dc18d727160.jpg en Image src. Funciona perfectamente.

Entonces, ¿qué va mal en la primera imagen? Cualquiera puede ayudarme.

[enmanuelrondon1]

amigo lo pudiste solucionar??

[aivaneezy1]

Hello everyone. I recently had the same problem where if i put a url as src on the Image component it will not show at all. I'm using s3 for my images. All i had to do was configured the CORS on my bucket. This is the JSON configuration i have on my CORS. [ { "AllowedHeaders": [ "" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "" ], "ExposeHeaders": [] } ]

[noamwebz]

If that helps anyone in NextJs the src is different, I solved it with this code:

import mainDashboardPNG from "../../../assets/imgs/main-dashboard-PDF.png";
    <Document>
      <Page size="A4" style={stylesPage1.page}>
        <View style={stylesPage1.section}>
          <Image style={stylesPage1.image} src={mainDashboardPNG.src} />
        </View>
      </Page>
    </Document>