Next.js 14加载node_modules图片失败：显示[Object Object]问题求助

问题原因 #

Next.js从v11开始，内置的webpack图片处理规则会将图片文件（如*.png）导入为StaticImageData对象（包含src、width、height等属性），而非传统的字符串路径。你安装的第三方模块直接将这个对象赋值给<img>的src属性，导致浏览器渲染时将对象转为字符串[Object Object]。

解决方案 #

方案1：自定义webpack配置处理node_modules中的图片 #

这是最直接的解决方式，通过修改next.config.js，让node_modules内的图片文件使用file-loader（返回字符串路径），而非Next.js的内置loader：

1. 先安装依赖：

npm install file-loader --save-dev
# 或
yarn add file-loader --dev
# 或
pnpm add file-loader -D

2. 修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    // 为node_modules中的图片添加file-loader规则
    config.module.rules.push({
      test: /\.(png|jpe?g|gif|svg)$/i,
      include: /node_modules/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[hash].[ext]',
            outputPath: 'static/media/',
            publicPath: '/_next/static/media/',
          },
        },
      ],
    });

    // 让Next.js的内置图片loader排除node_modules目录
    const imageRule = config.module.rules.find(rule => rule.test?.test('.png'));
    if (imageRule) {
      imageRule.exclude = /node_modules/;
    }

    return config;
  },
};

module.exports = nextConfig;

方案2：用Next.js Image组件替换第三方模块的图片（按需使用） #

如果第三方组件支持自定义图片元素，可以手动将其内部的<img>替换为Next.js的next/image组件，提取StaticImageData中的属性传入：

import Image from 'next/image';
import ThirdPartyComponent from 'third-party-module';
// 导入第三方模块中的图片
import moduleImage from 'third-party-module/assets/icon.png';

// 自定义包装组件
const CustomizedComponent = () => {
  // 假设第三方组件接受imageProps或类似参数来替换图片
  return (
    <ThirdPartyComponent
      imageElement={
        <Image
          src={moduleImage.src}
          width={moduleImage.width}
          height={moduleImage.height}
          alt="模块图标"
        />
      }
    />
  );
};

export default CustomizedComponent;

注意：此方案仅适用于第三方组件提供了自定义图片元素的接口的情况。

疑问解答 #

• 是否必须使用自定义webpack loader？
  是的。核心矛盾是Next.js内置loader将图片转为StaticImageData对象，而第三方模块期望字符串路径。通过自定义webpack规则，让node_modules内的图片使用传统loader处理，就能解决这个问题。

• 为什么next-images没用？
  next-images是Next.js v10及更早版本的图片处理方案，v11之后Next.js内置了图片处理功能，两者的loader规则会冲突，因此无法适配v14版本的项目。

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