如何在服务器端做出反应来渲染图像？

Posted 2023-02-22

【中文标题】如何在服务器端做出反应来渲染图像？

【英文标题】：How to render images with react on server side?

【发布时间】：2016-06-10 03:34:54

【问题描述】：

如何使用 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 组件，它试图要求 logo。

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  src=logo /></a>**
                    </div>


                </div>
            </nav>
        );
    

但它适用于客户端的 webpack..

【问题讨论】：

我知道它已经过时了，但你最后发现了吗？我也有同样的问题。

【参考方案1】：

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

安装此模块以排除 node_modules：

npm install --save webpack-node-externals 

为你的服务器创建一个单独的 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'
      
    ]
  

这是一个示例服务器 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'
      
    ]
  

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

webpack
node dist/bundle.js

【讨论】：

这对我不起作用。结果是输出路径上的图像，src 将其查找为'src='2013068ae43bfc8883afa52e781eef49.jpg'。但如果我不在根路由上，它会被解析为http://localhost:3000/receitas/2013068ae43bfc8883afa52e781eef49.jpg，这不是文件位置。

当我尝试获取此 URL http://localhost:3000/receitas/2013068ae43bfc8883afa52e781eef49.jpg 或此 URL http://localhost:3000/2013068ae43bfc8883afa52e781eef49.jpg 时，结果不是图像，也不是未找到。这是 index.js 服务器端渲染的