如何在前端反应中显示文件（图像），它们的名称是从 mongoDb 中获取的，并且它们存储在服务器上

Question

我有 Mern 的 Web 应用程序。它适用于 json 数据。我只是在我的项目中使用文件我可以通过 multer 中间件将文件从前端上传到后端并存储在服务器上并将它们的名称保存在 mongoDb 数据库中。

所以当我从后端获取数据时，正常数据运行良好，但是当我尝试显示仅显示存储在数据库中的名称而不显示实际图像的文件时，我被卡住了。如何在前端显示存储在后端的图像以及我从 mongodb?

获取的名称

这是从数据库中获取的数据并显示在前端。

  `const { name, email, phone, protype, date, description, _id, file } = pro;`

但是当我想显示图像或文件时，它只是显示数据库中的文件名。这就是我展示的方式。

<span className='data'>
      <img src={file} alt='images' />
</span>

我不知道如何给出存储文件的服务器上文件夹的路径。

Answer 1

当您在服务器上保存文件时，您应该将整个文件 URL 存储在您的 MongoDB 数据库中，因为这样您就可以像已经完成的那样引用它。

因此，您不应只保存文件名，而应保存文件 URL。例如：https://example.com/img/1234.jpg

How to Display files(images) in react front-end their names fetched from mongoDb and they are store on server