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

Question

亲爱的开发者您好，

我使用 ant design 应用程序模板作为前端，使用 graphql api 作为后端，我已经达到了一种情况，我想获取帖子列表，后端一切正常，API 返回帖子及其图像路径。
为了了解更多，图像路径保存在数据库中，图像本身存储在本地文件夹中。

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

我尝试过谷歌，但没有类似的情况，我在 gethub 上发现了一个问题，但它谈论的是通过使用从文件夹导入图像然后将其放入 img 标签来显示单个图像但这不是我的情况。

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

ps:“我是新手”

谢谢大家

Answer 1

有几种不同的方法:

1) 公用文件夹

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

访问它们

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

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

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

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

2) S3(或一些类似的服务)

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

3) 自己的网络服务器

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

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