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 :)
Answer from Yusuf Syam on Stack OverflowFirst 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 :)
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.
» npm install @react-pdf/image
» npm install react-pdf
So I'm able to pass in a react component render it to a static markup and pass it to a the document component which renders as a pdf - in one of the components I get the url from an API endpoint and I pass it as src to an Image in one of the components - but keeps failing to render it just prints a blank space - can anyone please help me fix this I'm stuck for a long time