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

我正在使用 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'模块,所以我迷路了,我应该在后端进行处理然后发送那些图片吗?如果还没有怎么做,我很乐意收到其他建议。

stack overflow How to send pictures from back-end to the front-end in ReactJS
原文答案

答案:

作者头像

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

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

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

http://localhost:3000/{your_image_name}.jpg

作者头像

在react前端:

<img src={`http://localhost:3000/images/image1.png`} alt="" />

我希望您已经在node后端设置了静态文件夹。如果没有:

app.use(express.static('public'));

后端文件夹结构:public > images > image1.png