我是服务器端 React 渲染方面的新手,我可以使用客户端的 webpack 和服务器端的 Express(当然是通过 React)制作简单的同构 React 应用程序。但是现在我遇到了一些麻烦 - 我决定在我的项目中使用图像:
export default class JustImage extends Component {
render() {
return (
<div>
<img src={require("just_image.png")} />
</div>
);
}
}
它的代码对客户端来说就像一个魅力,但是当我尝试渲染时我的服务器端代码告诉我这个错误:
just_image.png: Unexpected character '�'
据我了解,Node.js 对 webpack 加载程序一无所知,因此无法正确加载图像。因为我是 React 和服务器端渲染的新手,所以我想知道是否有任何标准方法可以解决这个问题——不仅仅是图像,我使用图像(PNG/JPEG/JPG/ICO)、SVG、SASS/少/CSS。提前致谢。
最佳答案
有两种方法可以解决这个问题,AFAIK:
也将
webpack
用于您的服务器代码。在服务器的 webpack 配置中,您可以使用与客户端相同的加载器。例如,您可以对图像文件使用url-loader
或file-loader
。{ test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url-loader', options: { limit: 8192, }, }
您可以破解服务器代码顶部的
require.extensions
。if (process.env === 'development') { require.extensions['.png'] = () => {} }
我发布了一个类似的问题 here没有得到答案:)
关于javascript - React 服务器端渲染 vs webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42351606/