react-pdf Images not rendering

Question

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"} />

Answer 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 :)