Question

我是服务器端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 / LESS / CSS。提前谢谢。

Answer 1

解决问题有两种方法，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没有得到答案：）

Answer 2

我通过阅读react-starter-kit代码了解了很多，这基本上是Ming Soon告诉你的，你必须用webpack编译服务器端代码，你需要多个webpack配置。

反应服务器端渲染与webpack

2 个答案: