ReactJS中如何将图片从后端发送到前端

Posted 2023-03-07

【中文标题】ReactJS中如何将图片从后端发送到前端

【英文标题】：How to send pictures from back-end to the front-end in ReactJS

【发布时间】：2021-11-28 07:29:38

【问题描述】：

我正在使用 ReactJS，我需要在我的前端提供一些图片，我无法通过以下方式做到这一点 <img alt="" src=process.env.PUBLIC_URL + image + ".png" /> 因为我将提供超过 2 张以特定关键字开头的图片，所以我我想这样做

      dir= '../../public/images/'
      files= fs.readdirSync(dir)

      for (const file of files) 
        if(file.startsWith(keyword))
        
           setPictureName(dir+file+ ".png")
         
        
         

不幸的是我不能在客户端使用'fs'模块，所以我迷路了，我应该在后端进行处理然后发送那些图片吗？如果还没有怎么做，我很乐意收到其他建议。

【问题讨论】：

您不能也不应该从文件系统中获取数据。假设您使用的是 CreateReactApp，您需要将文件放在您的公用文件夹中。然后只需操纵 src 以指向您想要的任何图像。如果您想要所有图片的列表，您可以在 FE 中预先定义它，或者如果它是动态的，则创建一个为您提供此列表的后端 API。

@正如你所说，我不应该从文件系统中获取数据。那么如何创建这个 API 呢？你能举一些我可以从哪里开始的例子吗

如果图像是动态的，您将如何将图像上传到公用文件夹？ API 是一个完整的后端应用程序，需要大量工作，需要托管等。如果您手动添加图像，只需将它们的名称保存在 FE 某处的 const 数组中。

【参考方案1】：

假设您在后端使用 express，只需将文件作为静态文件从公共或您想要的任何文件夹提供。

app.use('/static', express.static('public'))

然后通过调用 url 来获取你的文件

http://localhost:3000/your_image_name.jpg

【讨论】：

在我的情况下，我要显示的图片不止一张，而且我要显示的那些图片以我每次都会指定的关键字开头，那么我该如何设置条件？或者如果我不能在前端使用“fs”模块，我该如何循环浏览所有这些图片？

在这种情况下，解决方案保持不变。您应该将图像的名称或路径存储在数据库中。只需根据您的要求查询数据库（即基于您的关键字前缀）并返回图像网址数组到前端呈现它。