Next.js App Router中Image组件本地图片路径配置疑问

解决图片无法显示的问题 #

你直接用/assets/fallbackLogo.png作为路径找不到图片，是因为Next.js App Router中，绝对路径/xxx默认指向public目录下的资源，而你的图片放在src/app/assets里，这个位置不在public目录的映射范围内。

有两种快速修复方式：

• 把图片移动到public/assets目录下，此时/assets/fallbackLogo.png就能正确指向图片。
• 保持图片在src/app/assets，改用导入图片的方式使用（下文会详细说明）。

两种本地图片使用方式的选择（适配自定义尺寸需求） #

两种方式都支持自定义图片显示尺寸，具体选哪种看你对资源管理的偏好：

1. 直接写路径（需放在public目录） #

• 操作：把图片放到public/assets，直接用绝对路径作为src值，手动指定width和height，或用fill属性配合容器控制尺寸。
• 代码示例：

import Image from 'next/image';

export default function YourPage() {
  // 方式1：手动指定固定宽高
  return <Image src="/assets/fallbackLogo.png" alt="备用Logo" width={200} height={100} />;

  // 方式2：用fill配合容器实现响应式/自定义尺寸
  // return (
  //   <div style={{ position: 'relative', width: '300px', height: 'auto', aspectRatio: '2/1' }}>
  //     <Image src="/assets/fallbackLogo.png" alt="备用Logo" fill objectFit="contain" />
  //   </div>
  // );
}

• 优势：无需导入，写法简洁；适合需要快速引用静态资源的场景。

2. 导入图片后使用（支持app目录下的资源） #

• 操作：先通过相对路径导入图片，再把导入的对象作为src值，手动覆盖自动生成的width和height即可自定义尺寸。
• 代码示例：

import Image from 'next/image';
// 根据你的组件所在位置调整相对路径，比如组件在src/app下，就用./assets/fallbackLogo.png
import fallbackLogo from './assets/fallbackLogo.png';

export default function YourPage() {
  return (
    <Image
      src={fallbackLogo}
      alt="备用Logo"
      width={250} // 自定义宽度，覆盖图片原尺寸
      height={120} // 自定义高度
      // 也可以用style或className控制尺寸
      // style={{ width: '100%', height: 'auto' }}
    />
  );
}

• 优势：编译时就能校验路径是否正确，避免运行时404；Next.js会自动对图片进行格式优化、按需加载；无需把图片放到public目录，更适合app目录内的资源管理。

总结 #

• 若偏好简洁写法，选「直接写路径」，记得把图片移到public目录，手动指定宽高或用fill配合容器。
• 若想保留图片在app目录内，或需要编译时路径校验，选「导入图片」，手动覆盖width/height即可实现自定义尺寸。

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