react-pdf: Image not rendering in react-pdf?

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. Screenshot 2022-03-03 001800

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. Screenshot 2022-03-03 001903

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

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 17

Most upvoted comments

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?

+14

bastiampos on Jan 12, 2023

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

arslantalib12 on Nov 22, 2022

@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_

chrblabla on Mar 11, 2022

@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!

cmakride on Jan 31, 2024

@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>
  )
}

JuanmeGarcia on Jan 2, 2024