如何从本地目录加载图像并在 reactjs 应用程序中显示它们？

Question

亲爱的开发者你好，

我使用 ant design 应用程序模板作为前端，使用 graphql api 作为后端，我遇到了一种情况，我想获取帖子列表，后端一切正常，API 一起返回帖子与他们的图像路径。
想了解更多，images path are save on database, and the images itself are stored in local folder.

现在，我不知道如何使用我在获取帖子时检索到的路径加载这些图像。

我试过谷歌，但没有类似的情况，我在 gethub 上发现了一个问题，但它正在谈论使用 import image from folder and then put it inside img tag 显示单个图像，这不是我的情况。

我知道有另一种方法是将我的后端部署在网络服务器上，然后直接访问存储的图像，但这对我来说并不理想。

ps：“我是新手”

谢谢大家，

Answer 1

有几种不同的方法：

1) 公用文件夹

当您启动一个 React 应用程序时，您会在文件夹结构中找到一个“公共”文件夹。例如，此文件夹还包含网站图标。当您将图像放在那里时，您可以通过

访问它们

<img src="/imagename.jpg" />

在您的数据库中，您需要存储路径“/imagename.jpg”然后才能访问它们。

如果您要在“public”文件夹中创建子文件夹，src 属性中的路径也需要更改。 例子： - 民众 -- 资产 --- 头像.jpg

<img src="/assets/avatar.jpg" />

2) S3（或一些类似的服务）

将它们上传到 Amazon S3 并存储该路径。这可以手动完成，也可以让您的 API 处理。这样，您只需提供 img-tag 的绝对路径即可。

3) 自己的网络服务器

在您上传图片时将它们上传到您自己的网络服务器。

备注：如果不使用其他网络服务器，则无法从项目文件夹之外的本地文件夹中检索文件。