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

如何使用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> ) } } 

但是当我运行与巴贝尔服务器我得到这个错误：

/assets/img/logo.png：意外字符'？' （1：0）

这是试图要求徽标的标题组件。

 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工作正常..

Answer 1

你需要一个独立的webpackconfiguration为你的服务器

1. 安装此模块以排除node_modules：

    npm install --save webpack-node-externals 

2. 为您的服务器创build一个单独的webpackconfiguration：

    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