如何在 React 中显示从 Express 服务器获取的图像？答案

【问题标题】：How to display images in React that are grabbed from an Express server?如何在 React 中显示从 Express 服务器获取的图像？
【发布时间】：2019-10-05 03:07:36
【问题描述】：

我只是对如何从源文件夹正确地提供资产有点困惑。

相关的服务器端代码（客户端向/images发出请求，服务器发回文件名）：

const images = './static/images/';
app.use(express.static('static/images'))

app.get('/images', (req, res) => {
    res.setHeader('Content-Type', 'application/json');
    fs.readdir(images, (err, files) => {
        res.send(files);
      });
});

我的目录结构如下：

public
   index.html
server (houses Node/Express code)
   index.js
src (houses React code)
   App.js
static
   images
      image1, image2, image4, image4

如果我尝试在 React 中显示图像（state.currImage 是 4 个文件名之一）：

<img alt="scan" src={ require(this.state.currImage)}

我收到一条错误消息“未处理的拒绝（错误）：找不到模块'./static/images/file1.jpg'”

【问题讨论】：

你能console.log('[image]', this.state.currImage) 告诉我它说了什么吗？另外...您可以发布您的整个组件，以便我们查看 this.state.currImage 是如何设置的吗？
你为什么要在浏览器中调用require？你为什么给res.send而不是urls的文件系统路径数组？
@Dan O 图片存储在我的电脑上

标签： node.js reactjs express

【解决方案1】：

看起来您可以从图像加载中删除 require，因为它是图像的路径而不是 javascript 模块的路径。

<img alt="scan" src={this.state.currImage}

您可能需要更新这些图像的 url 以指向服务器 url。现在字符串是./static/images/file1.jpg，但它可能需要是/images/file1.jpg。

【讨论】：