Next.js 11搭配next-optimized-images时PNG/JPG图片无法显示问题

核心问题出在资源导入的返回值解析错误：你导入的PNG/JPG格式资源，next-optimized-images默认会返回包含资源路径、宽高、占位图数据的对象，而非直接的路径字符串，你直接将整个对象赋值给img标签的src属性，浏览器无法正常解析。从你提供的页面元素检查结果也能验证这一点：src字段的base64内容解码后实际是导出对象的JS代码字符串，并非图片二进制数据。

解决方案按优先级执行：

1. 修正JSX代码写法，导入资源后取其src属性赋值给img标签

import MyImage from "../public/images/MyImage.png";

<img src={MyImage.src} alt="some text" />

2. 若希望保持原有src={MyImage}的写法，可以修改next.config.js配置，关闭图片内联阈值，让所有图片统一返回路径字符串：

// config for next-optimized-images
const withOptimizedImages = require("next-optimized-images");

module.exports = withOptimizedImages({
  handleImages: ["jpeg", "png", "svg", "gif", "ico"],
  optimizeImagesInDev: true,
  // 新增配置：单位为字节，设为-1即关闭小图base64内联，所有图片返回路径字符串
  inlineImageLimit: -1
});

修改配置后重启开发服务，清除浏览器缓存即可恢复正常。
3. 额外排查：若上述操作后仍有异常，确认next.config.js中没有同时配置Next.js 11内置的images相关参数，避免内置图片处理逻辑和next-optimized-images插件产生优先级冲突。

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