Next.js加载图片src显示[object Object]仅展示默认图问题求助

问题现象 #

• 图片仅能显示默认占位图和alt辅助文本，实际内容无法渲染
• 渲染后的img标签源码：

<img class="blur flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14 lazyloaded" alt="Profile" src="[object Object]">

• 若require语句后不加.default，src属性值会变为[object Module]
• 该问题在Next.js 11、12版本下均存在

当前图片引用写法 #

注释与未注释的两种写法均返回相同异常：

<Image
  className="flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14"
  // src={require("../../../content/assets/profile.png").default}
  // webpSrc={require("../../../content/assets/profile.png?webp").default}
  // previewSrc={require("../../../content/assets/profile.png?lqip").default}
  src={require("public/profile_new.png").default}
  webpSrc={require("/public/profile_new.png?webp").default}
  previewSrc={require("/public/profile_new.png?lqip").default}
  alt="Profile"
/>

现有配置 #

next.config.js 配置 #

所有注释过的配置项均已尝试取消注释，问题未解决：

const optimizedImages = require("next-optimized-images");
module.exports = optimizedImages({
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        options.defaultLoaders.babel,
        {
          loader: "file-loader",
          options: {
            esModule: false,
          },
        },
      ],
    });

    return config;
  },
});

package.json 依赖项 #

"dependencies": {
    "clsx": "^1.1.1",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-optipng": "^8.0.0",
    "lazysizes": "^5.3.1",
    "lqip-loader": "^2.2.1",
    "next": "^12.0.4",
    "next-compose-plugins": "^2.2.1",
    "next-optimized-images": "^2.6.2",
    "next-themes": "^0.0.14",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-markdown": "^5.0.3",
    "react-syntax-highlighter": "^15.4.3",
    "react-toggle-dark-mode": "^1.0.3",
    "remark-gfm": "^1.0.0",
    "typeface-merriweather": "^1.1.13",
    "typeface-open-sans": "^1.1.13",
    "url-loader": "^4.1.1",
    "webp-loader": "^0.6.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.16.4",
    "@babel/preset-react": "^7.16.0",
    "@tailwindcss/typography": "^0.4.0",
    "autoprefixer": "^10.2.5",
    "gray-matter": "^4.0.2",
    "html-webpack-plugin": "^5.5.0",
    "postcss": "^8.2.8",
    "tailwindcss": "^2.0.4"
  }

问题核心是Next.js内置静态资源处理逻辑和next-optimized-images、自定义file-loader规则冲突，导致require返回的不是资源路径而是模块对象，按以下步骤修改即可解决：

1. 删除自定义webpack图片处理规则
   Next.js 11+已经内置了静态图片导入、优化能力，不需要额外配置file-loader，自定义的file-loader规则和内置逻辑、next-optimized-images的loader规则冲突，导致返回值异常。修改后next.config.js如下：

const optimizedImages = require("next-optimized-images");
module.exports = optimizedImages({
  // 移除自定义的webpack图片loader规则即可，不需要额外配置图片相关loader
});

2. 修改图片引用写法
   分两种场景处理：

• 存放在public目录下的静态图片，不需要用require导入，直接写绝对路径即可，路径直接以/开头，不需要加public前缀：

<Image
  className="flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14"
  src="/profile_new.png"
  width={56}
  height={56}
  alt="Profile"
/>

• 存放在content/assets等非public目录下的图片，需要用require导入，next-optimized-images会自动处理后缀参数，不需要加.default：

<Image
  className="flex-shrink-0 mb-0 mr-3 rounded-full w-14 h-14"
  src={require("../../../content/assets/profile.png")}
  webpSrc={require("../../../content/assets/profile.png?webp")}
  previewSrc={require("../../../content/assets/profile.png?lqip")}
  alt="Profile"
  width={56}
  height={56}
/>

3. 清理缓存后重启服务
   执行以下命令重启开发服务，避免缓存影响：

rm -rf .next
npm run dev

如果以上操作后还存在问题，直接卸载url-loader、file-loader依赖即可，next.js内置的loader已经覆盖了这些能力，多余的依赖会导致规则冲突：

npm uninstall file-loader url-loader

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