如何将静态文件从后端显示到 React？答案

【问题标题】：How to display static files from backend into React?如何将静态文件从后端显示到 React？
【发布时间】：2021-10-11 14:17:07
【问题描述】：

我有一个带有 Express-Node.js 后端的 React 应用程序。我有一个链接两者的代理。现在，我在后端的目录中有一些静态文件。当我发出请求并将响应放在图像标签的“src”属性中时，我可以显示图像，但是当我在浏览器中尝试链接时不会出现相同的结果。

这适用于浏览器：http://localhost:5000/public/image.png /EXAMPLE ROUTE/

这不是：https://localhost/image.png /EXAMPLE ROUTE/

我的后端代码：

const express = require('express');
const app = express();
const PORT = process.env.PORT;

app.use('/images', express.static(__dirname + '/public'));

app.listen(PORT, (err) => {
  if(err) {
    throw err;
  } else {
    console.log(`Running on http://localhost:${PORT}/`);
  }
});

我的反应代码：

import React from 'react';
import './App.css?v=1';

function App() {
    return (
        <div className="App">
            <img src="/images/image.png" alt="Logo" /> /*THIS TOTALLY WORKS*/
            <img src="https://localhost/images/image.png" alt="Logo" /> /*THIS TOTALLY WORKS*/
        </div>
    );
}

export default App;

当我进入浏览器并输入 URL 时，我的问题出现了：https://localhost/images/image.png -> 这不会以 http://localhost:5000/public/image 的方式显示图像。 png 将和我得到的只是一个空白页。

在 React 的 package.json 文件中，我代理到后端。

如果需要澄清，请告诉我。提前谢谢。

【问题讨论】：

https://localhost/ 你忘记输入端口:5000，而且你的 Node 服务器不能在 HTTPS 上运行，只能在 HTTP 上运行
您还需要包含您在app.use() 代码中定义的路径，因此整个URL 将是localhost:5000/images/image.png

标签： javascript node.js reactjs express

【解决方案1】：

像我一样

const express = require('express');
const app = express();
const path = require('path');


 this.app.use("/public", express.static(path.join(__dirname, "public")));

【讨论】：