Next.js使用next/image加载项目本地图片方法及路径异常排查

异常原因 #

你遇到的问题由3个配置/写法错误共同导致：

• 静态资源路径引用规则错误：Next.js 会将项目根目录下的public目录映射为站点根路径，引用该目录下的资源时不需要携带public及其上层目录前缀。你传入的/src/public/product.png不符合本地静态资源的路径匹配规则，会被框架判定为远程图片资源，因此自动拼接了f_auto,c_limit,w_384,q_auto这类图片优化处理参数前缀。
• 组件属性类型错误：next/image组件原生要求width、height属性传入数值类型参数，你自定义的Thumbnail组件将两个属性定义为字符串类型，传入的"100"是字符串值，会导致组件尺寸计算、资源适配逻辑异常。
• 目录结构不规范：Next.js默认识别的public静态资源目录与src源码目录为同级关系，你将public放在src目录内部，框架默认不会扫描该位置的静态资源。

修复步骤 #

1. 调整目录结构
   将product.png从src/public目录移动到与src同级的根级public目录下，最终文件路径为项目根目录/public/product.png。

如果你确实需要将静态资源目录放在src内部，可以在next.config.js中通过publicDir配置项手动指定静态资源目录路径，非特殊场景不推荐该写法。

2. 修正Thumbnail组件的类型定义
   将width、height的类型从字符串改为数值，符合next/image的API要求：

import React from "react";
import Image from "next/image";

type ThumbnailType = {
  image: string;
  alt: string;
  width: number;
  height: number;
};

export const Thumbnail: React.FC<ThumbnailType> = ({
  image,
  alt,
  width,
  height,
}) => {
  return <Image src={image} alt={alt} width={width} height={height} />;
};

3. 修正页面调用代码
   引用图片时去掉路径中冗余的/src/public前缀，直接以/开头写public目录下的文件相对路径，同时width、height传入数值而非字符串：

import type { NextPage } from "next";
import { Thumbnail } from "~/components";

const Home: NextPage = () => {
  return (
    <div>
      <Thumbnail
        image="/product.png"
        alt="nice"
        width={100}
        height={100}
      />
    </div>
  );
};

export default Home;

完成以上调整后重启开发服务，图片即可正常加载，src属性也不会再出现异常的优化参数前缀。

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