React SSR项目Node服务端加载本地图片报unexpected token �PNG错误求助

我之前在搭建React SSR项目时也踩过这个坑，咱们来捋清楚问题出在哪以及怎么解决：

问题根源 #

Node.js的require机制默认是用来加载JavaScript或JSON模块的。当你在服务端渲染流程中用require('../../../assets/img/image.png')时，Node会尝试把这个PNG二进制文件当作JS代码去解析，而PNG文件开头的�PNG字节完全不符合JavaScript语法，自然就会抛出SyntaxError: Invalid or unexpected token错误。客户端运行正常是因为Webpack这类构建工具会提前把图片资源处理成URL或base64字符串，不会让浏览器去执行require加载二进制文件。

解决方案 #

下面提供几种实用的解决思路，你可以根据项目情况选择：

1. 用Webpack处理图片资源（推荐生产环境使用）

如果你的SSR项目是用Webpack打包的，配置file-loader或url-loader来处理图片资源，这样构建时会自动把图片转成可直接使用的URL（小图还能转base64），客户端和服务端渲染都能正常识别。

Webpack配置示例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[hash:8].[ext]', // 给图片加哈希，避免缓存问题
              outputPath: 'images/', // 打包后输出的目录
              publicPath: '/images/', // 访问图片的基础URL
            },
          },
        ],
      },
    ],
  },
};

组件中使用方式：

// 直接导入图片，Webpack会处理成对应的URL
import image from '../../../assets/img/image.png';

function MyComponent() {
  return <img src={image} width="400" />;
}

2. 给Node添加二进制资源的加载钩子（临时/小项目可用）

如果你的项目没有用Webpack打包服务端代码，可以通过require.extensions（虽然官方标记为废弃，但小场景下能用）让Node加载图片时返回文件路径，而不是解析内容。

在服务端入口文件添加以下代码：

const path = require('path');

// 处理常用图片格式，让require返回文件绝对路径
['png', 'jpg', 'jpeg', 'gif'].forEach(ext => {
  require.extensions[`.${ext}`] = (module, filename) => {
    module.exports = filename;
  };
});

组件中使用方式：

const imagePath = require('../../../assets/img/image.png');
// 根据环境拼接成可访问的URL（假设静态资源托管在/assets路径下）
const imageUrl = process.env.NODE_ENV === 'production'
  ? `/assets/${path.basename(imagePath)}`
  : `http://localhost:3000/assets/${path.basename(imagePath)}`;

function MyComponent() {
  return <img src={imageUrl} width="400" />;
}

注意：这种方式不推荐在大型生产项目中使用，长期来看还是用构建工具更稳定。

3. 直接使用静态资源URL（最简单的方案）

把图片放到服务端的静态资源目录（比如public/assets/img），然后直接用相对URL引用，这样服务端渲染时只会渲染这个URL，不会去读取文件内容，客户端会直接请求这个URL获取图片。

组件中使用方式：

function MyComponent() {
  // 假设服务端用express.static('public')托管了public目录
  return <img src="/assets/img/image.png" width="400" />;
}

这种方式无需额外配置，适合简单场景或静态资源较多的项目。

内容的提问来源于stack exchange，提问作者Satish Lakhani