如何在服务器端react渲染图像？

IT技术 javascript node.js image reactjs express
2021-05-13 04:46:06

如何使用 React 在服务器端渲染图像和 css 文件？

这是我的服务器代码：

const express = require('express')
const router = express.Router()
const ReactDOM = require('react-dom/server');

import Master from '../../../client/Master'

router.get('/', (req, res) => {
    res.render('test.html', {reactOutput: ReactDOM.renderToString(<Master/>)});
});

主组件：

import React from "react";
import Intro from "./pages/Intro";
import Footer from "./components/Footer";
import Header from "./components/Header";

export default class Master extends React.Component {
    constructor() {
        super();
        this.state = {appStatus: 'INTRO'}
    }

    render() {
        let layout;
        switch (this.state.appStatus) {
            case "INTRO":
                layout = <Intro/>;
        }

        return (
            <div>
                <Header/>
                {layout}
                <Footer/>
            </div>
        )
    }
}

但是当我用 babel 运行服务器时，我收到了这个错误：

/assets/img/logo.png: 意外字符 '?' (1:0)

这是 Header 组件，它试图要求徽标。

import React from "react";
**import logo  from '../../assets/img/logo.png';**

export default class Header extends React.Component {
    constructor() {
        super();
    }

    render() {
        return (
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">**<img width="250" src={logo} alt=""/></a>**
                    </div>


                </div>
            </nav>
        );
    }
}

但是它在客户端的 webpack 中工作得很好..

1个回答

你的服务器需要一个单独的 webpack 配置

  1. 安装此module以排除 node_modules：

    npm install --save webpack-node-externals

  2. 为您的服务器创建一个单独的 webpack 配置：

    module.exports = {    
  const path = require('path')
  const nodeExternals = require('webpack-node-externals')

  context: path.resolve(__dirname, 'directory of your server file'),
  entry: ['./filename of your server file'],
  output: {
    path: path.join(__dirname, 'directory of your bundled file'),
    filename: 'filename of your bundled file'
  },
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        use: 'url-loader?limit=8192'
      }
    ]
  }
}

  3. 这是一个示例服务器 webpack.config.js：

    module.exports = {    
  const path = require('path')
  const nodeExternals = require('webpack-node-externals')

  context: path.resolve(__dirname, 'src'),
  entry: ['./index.js'],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  target: 'node',
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg|ico)$/i,
        use: 'url-loader?limit=8192'
      }
    ]
  }
}

  4. 如果使用上面的 webpack.config.js 示例，运行 webpack 然后编译服务器文件：

    webpack
node dist/bundle.js
其它你可能感兴趣的问题
上一篇一角永不粘连 下一篇ReactJS - React.Children.forEach - 我可以获得子组件名称吗？