如何在反应中加载服务器端渲染中的图像？答案

【问题标题】：how to load images in server side rendering in react?如何在反应中加载服务器端渲染中的图像？
【发布时间】：2022-10-01 20:22:04
【问题描述】：

我的 server/server.js 中有这段代码

import path from \'path\';
import fs from \'fs\';

import React from \'react\';
import ReactDOMServer from \'react-dom/server\';
import express from \'express\';

import App from \'../src/App\';

const PORT = process.env.PORT || 1234;
const app = express();

// ...

app.get(\'/\', (req, res) => {
    const app = ReactDOMServer.renderToString(<App />);
    const indexFile = path.resolve(\'./build/index.html\');
  
    fs.readFile(indexFile, \'utf8\', (err, data) => {
      if (err) {
        console.error(\'Something went wrong:\', err);
        return res.status(500).send(\'Oops, better luck next time!\');
      }
  
      return res.send(
        data.replace(\'<div id=\"root\"></div>\', `<div id=\"root\">${app}</div>`)
      );
    });
  });
  
  app.use(express.static(\'./build\'));
  
  app.listen(PORT, () => {
    console.log(`Server is listening on port ${PORT}`);
  });

还有 server/index.js

require(\'ignore-styles\')

require(\'@babel/register\')({
    ignore: [/(node_module)/],
    presets: [\'@babel/preset-env\', \'@babel/preset-react\']
})

require(\'./server\')

在港口运行时图像未加载css 在服务器端渲染。

反应版本：17

我还在 index.js 中补充了水分

任何答案都会有很大帮助。

谢谢你。

标签： javascript reactjs express server server-side-rendering

【解决方案1】：

app.use('/images', express.static(path.join(__dirname, '../images')))

【讨论】：