Next.js导入本地jpg/png图片报unsupported file type错误如何解决

第一步：清理冲突依赖 #

• 卸载不需要的第三方图片处理依赖：

npm uninstall next-images file-loader
# 若使用yarn执行
yarn remove next-images file-loader
# 若使用pnpm执行
pnpm remove next-images file-loader

• 删除项目根目录下的webpack.config.js文件，Next.js所有webpack相关配置统一在next.config.js中管理，单独的配置文件会导致规则冲突。

第二步：修正next.config.js配置 #

删掉之前为next-images添加的所有配置，最简配置参考如下（可按需保留你自己的其他业务配置）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // 无需额外添加图片相关loader配置
}

module.exports = nextConfig

第三步：调整图片引用和组件写法 #

Next.js 11及以上版本原生支持导入jpg、png、webp等格式的静态图片，无需额外loader，清理完依赖后重启项目即可正常识别，可选择以下两种引用方式：

方案A：保留导入引用写法 #

如果使用的是Next.js 13及以上版本，Image组件的layout、objectFit、objectPosition属性已废弃，需要调整写法：

import Image from "next/image";
import Iu from "../../logo/Iu.jpg";

const Banner = () => {
  return (
    {/* 父元素必须加相对定位，否则fill属性会撑满整个视口 */}
    <div style={{ position: 'relative', width: '100%', height: 300 }}>
      <Image 
        src={Iu} 
        fill
        style={{ objectFit: 'contain', objectPosition: 'left' }}
        alt="iu logo" 
      />
    </div>
  );
};

export default Banner;

方案B：public目录引用（更推荐） #

把你的logo/Iu.jpg放到项目根目录的public文件夹下，路径为public/logo/Iu.jpg，无需导入图片，直接写路径即可：

import Image from "next/image";

const Banner = () => {
  return (
    <div style={{ position: 'relative', width: '100%', height: 300 }}>
      <Image 
        src="/logo/Iu.jpg" 
        fill
        style={{ objectFit: 'contain', objectPosition: 'left' }}
        alt="iu logo" 
      />
    </div>
  );
};

export default Banner;

最终验证 #

所有配置修改完成后，删除项目下的.next缓存文件夹，重启开发服务即可解决报错。

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