React-PDF图像未渲染
我一直在尝试将图像添加到React-PDF PDF文档中。但是，无论我做什么，由于某些原因，图像从未在PDF中显示（除了一些非常具体的图像）。我发现其他人遇到了同样的问题，但没有解决方案或解决方法。任何帮助将不胜感激。
这是我使用的代码，使用React-PDF自己的图像组件：
<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"} />
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"} />
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
将您的图像保存在公共文件夹中，并从公共文件夹中保存您的图像，我们可以使用 /和图像的名称访问图像。
Save your image in the public folder and from the public folder we can access the image using /and the name of your image.
我假设这是由于大多数网站所配置的CORS问题。 EIHER使用配置的CORS白名单或使用来自同一域名的图像。 http：// localhost：3000/images/test.png如果React应用在LocalHost上运行：3000。查看控制台日志＆amp;网络日志以获取详细错误。
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.
首先，如果图像没有由PDFViewer包裹，则无法显示图像，其次，请检查样式中是否存在错误，就我而言，由于我给Font family的造型错误（我都不可见）（ 然后，我写了“时代新罗马”，而不是“时代罗马”）
，因此，要访问不是来自URL的图像，Bansaj的答案是非常正确的，但对于像我这样的前端人来说还不够清楚。因此，“使用来自同一域的图像”的含义是，我们必须将图像存储在
public文件夹中，而不是在src文件夹中，以便我们可以访问这些图像甚至通过URL。例如，在我的情况下，我在
public/文件夹中有一个smile.jpg图像。我们可以在Localhost：3000/smile.jpg上访问图像。然后，要访问react-pdf的图像中的
smile.jpg，我们可以这样做或
纠正我，如果错了:)
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
publicfolder and not in thesrcfolder, so that we can access the images even via url.For example, in my case on localhost, I have a
smile.jpgimage in thepublic/folder. We can access the image at localhost:3000/smile.jpg.Then, to access
smile.jpgin the react-pdf 's Image, we can do it like thisOr
Correct me if wrong :)