Next.js中使用next/image组件无法显示图片如何解决？

Next.js 内置的 Image 组件有明确的静态资源加载规则，你当前代码里写的 src="../images/Scroll.png" 属于相对文件路径，不符合组件的路径解析规范，因此触发加载错误。

你可以任选以下一种符合规范的写法调整代码：

• 方法1：将图片放入默认静态资源目录
  Next.js 约定项目根目录下的 public 文件夹为静态资源根目录，资源放在这个目录下可以直接通过根路径访问。
  1. 把你的 Scroll.png 移动到 public/images/ 路径下
  2. 调整Image组件的src为根路径，注意旧版本Image组件必须声明宽高，或者使用fill模式适配父容器：

  import Head from 'next/head'
  import Image from 'next/image'
  import styles from '../styles/Home.module.css'
  
  export default function Home() {
    return (
      <div className={styles.container}>
        <Head>
          <title>Create Next App</title>
          <meta name="description" content="Generated by create next app" />
        </Head>
  
        <div className={styles.scrollContainer}>
          <Image
            src="/images/Scroll.png"
            alt="Scroll Image"
            // 替换成你图片的实际像素宽高
            width={800}
            height={600}
          />
        </div>
      </div>
    );
  }
  

  如果不想手动写固定宽高，可以给父容器设置相对定位和固定尺寸，用fill属性让图片自适应容器：

  /* 对应Home.module.css中的样式 */
  .scrollContainer {
    position: relative;
    width: 100%;
    height: 500px;
  }
  

  对应Image组件修改为：

  <Image
    src="/images/Scroll.png"
    alt="Scroll Image"
    fill
    style={{ objectFit: "contain" }}
  />
  

• 方法2：通过import导入非public目录的本地图片
  如果你想保留图片当前的存放位置，不移动到public目录，可以直接在组件文件顶部导入图片，再将导入的变量传给src，Next.js会自动完成路径解析，同时自动识别图片的原始宽高，不需要手动声明width和height：

  import Head from 'next/head'
  import Image from 'next/image'
  import styles from '../styles/Home.module.css'
  // 按你的图片实际存储路径写导入语句
  import scrollImage from '../images/Scroll.png'
  
  export default function Home() {
    return (
      <div className={styles.container}>
        <Head>
          <title>Create Next App</title>
          <meta name="description" content="Generated by create next app" />
        </Head>
  
        <div className={styles.scrollContainer}>
          <Image src={scrollImage} alt="Scroll Image" />
        </div>
      </div>
    );
  }
  

补充说明：如果是加载外部域名的图片，还需要在项目根目录的next.config.js中配置images.domains白名单，否则同样会触发加载报错，本地静态图片按上述两种方法配置即可正常显示。

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