如何在服务器端使用React渲染图像? [英] How to render images with react on server side?
本文介绍了如何在服务器端使用React渲染图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用React在服务器端渲染图像和CSS文件?
How can I render images and css files on server side with React?
这是我的服务器代码:
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运行服务器时,出现此错误:
But when I run server with babel I got this error:
/assets/img/logo.png:意外字符?" (1:0)
/assets/img/logo.png: Unexpected character '?' (1:0)
这是试图要求徽标的Header组件.
And this is the Header component which tries to require 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 width="250" src={logo} alt=""/></a>**
</div>
</div>
</nav>
);
}
}
但是它在客户端的webpack上工作正常.
But it works fine with webpack for client side..
推荐答案
您需要为服务器使用单独的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
这篇关于如何在服务器端使用React渲染图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文