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

how to load images from a local directory and display them in reactjs app?

尊敬的开发人员,您好,

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

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

我试过 google,但没有类似的情况,我在 gethub 上发现了一个问题,但它是在谈论使用 import image from folder and then put it inside img tag 显示单个图像,而我的情况并非如此。

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

ps:“我是新手”

谢谢大家,

有几种不同的方法:

1) Public 文件夹

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

找到它们
<img src="/imagename.jpg" />

在您的数据库中,您需要存储路径“/imagename.jpg”以便随后访问它们。

如果要在 "public" 文件夹中创建子文件夹,则 src 属性中的路径也需要更改。 例子: - public -- 资产 --- avatar.jpg

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

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

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

3) 自己的网络服务器

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

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