2

I have been trying to add images to a react-pdf PDF document. However, no matter what I do, images don't ever show up in the PDF (except for some very specific images, for some reason). I've found others having this same issue, but no solutions or workarounds. Any help would be greatly appreciated.

This is the code I use, using react-pdf's own Image component:

<Image src={"https://www.google.com/url?sa=i&url=https%3A%2F%2Freact-pdf.org%2F&psig=AOvVaw261DFFQiH9beUEQio2joIu&ust=1652282615823000&source=images&cd=vfe&ved=0CAwQjRxqFwoTCKD78sWe1fcCFQAAAAAdAAAAABAD"} />
JoelEng
  • 51
  • 1
  • 4

3 Answers3

2

I am assuming this is due to CORS issue which most of the websites have it configured. Eiher use your own server with CORS whitelisting configured,or use images from same domain name. ex- HTTP://localhost:3000/images/test.png would work if React app is running on localhost:3000. Check out the console logs & network logs for detailed error.

Bansaj
  • 71
  • 2
1

First of all, the image cannot be displayed if it is not wrapped by PDFViewer, secondly, please check if there is an error in the styling, in my case, the image is not visible because I gave the wrong styling to the font family (I wrote 'Times New Roman' instead of ' Times-Roman')

Then, to access an image not coming from a url, Bansaj's answer is very correct, but not clear enough for a front end person like me. So the meaning of 'using images from the same domain' is that we have to store our images in the public folder and not in the src folder, so that we can access the images even via url.

For example, in my case on localhost, I have a smile.jpg image in the public/ folder. We can access the image at localhost:3000/smile.jpg.

Then, to access smile.jpg in the react-pdf 's Image, we can do it like this

<Image src="http://localhost:3000/smile.jpg" />

Or

<Image src={window.location.origin + "/smile.jpg"} />

Correct me if wrong :)

Yusuf Syam
  • 701
  • 1
  • 4
  • 18
-1

<Image src = "/smile.pdf <or any name of your file " />

Save your image in the public folder and from the public folder we can access the image using /and the name of your image.

Sayyad nazia
  • 1
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 26 '22 at 07:42