Next.js迁移项目配置next-images后导入public目录图片报模块找不到错误

你碰到这个报错，核心是把create-react-app的路径规则和旧教程的过时配置套到新版Next.js上了，两个关键偏差直接触发了找不到模块的错误：

• 你参考的教程提到的next-images插件是适配Next.js 9之前的老版本用的，现在11+、12+、13+的新版Next.js，本身就内置了public目录的静态资源处理能力，根本不需要装这个插件，多余的插件反而会干扰内置的路径解析逻辑。
• 你写的import FeaturesBg from '/images/features-bg.png'这种开头带根斜杠的导入写法，Next.js的模块解析器会顺着这个路径找项目根目录下的images文件夹，根本不会映射到你放在public/images里的资源，自然会抛错找不到文件。

因为你需要用原生<img>标签搭配Tailwind样式，有两种零额外依赖的实现方式：

方案1（推荐）：直接引用public路径，无需导入 #

public目录是Next.js约定的静态资源根路径，目录下的文件不需要任何import操作就能直接在前端页面使用：

• 直接删掉代码里两行导入图片的语句
• 写原生img标签时，src属性直接填/images/features-bg.png即可，Tailwind的样式类可以直接加在className上，完全不影响生效，示例：

  <img 
    src="/images/features-bg.png" 
    alt="区块背景"
    className="absolute inset-0 w-full h-full object-cover"
  />
  

方案2：保留import写法，修正路径规则 #

如果你习惯用变量存储图片路径的写法，不需要使用带根斜杠的绝对路径，直接写相对路径指向public下的文件即可，Next.js内置的解析逻辑会自动处理：

• 你当前的组件文件路径是components/partials/Features.js，要引用public/images下的图片，相对路径需要写为../../public/images/features-bg.png，比如：

  import FeaturesBg from '../../public/images/features-bg.png'
  import FeaturesElement from '../../public/images/features-element.png'
  

• 这种写法不需要任何第三方插件，Next.js会自动把路径解析为可访问的静态资源地址。

之前安装的next-images插件可以直接通过包管理器卸载，把原来的next.config.js改回官方默认的基础结构即可，避免插件带来的兼容问题：

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 其他自定义配置项
}
module.exports = nextConfig

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