大家好，我最近在维护一个基于Next.js 14（App目录结构）的项目，碰到了一个很诡异的问题：生产环境中，用Image组件加载public文件夹里的图片时，会出现偶发加载失败的情况——有时候打开页面图片正常显示，刷新几次又突然加载不出来了，完全没规律可言。

我已经按照Next.js官方建议安装了sharp模块来优化图片处理，但这个问题还是没解决。

先给大家看一下我的代码实现：
这是Header组件里的Image使用方式：

import Image from 'next/image';
import styles from './Header.module.css';

export default async function Header() {
  return (
      <header className={styles.header}>
        <div className="container">
          <Image src={'/assets/i/img-logo.png'} width={140} height={53} alt={'Company Name'} />
        </div>
      </header>
  );
}

我的public文件夹结构是这样的：

• public
  • assets
    • i
      • img-logo.png

后来我还尝试了直接导入图片的方式：

import Image from 'next/image';
import logo from '../public/assets/i/img-logo.png';
import styles from './Header.module.css';

export default async function Header() {
  return (
      <header className={styles.header}>
        <div className="container">
          <Image src={logo} width={140} height={53} alt={'Company Name'} />
        </div>
      </header>
  );
}

但这种方式也没能解决偶发加载失败的问题。

有没有朋友遇到过类似的情况？或者能给我一些排查方向或者解决建议的？麻烦大家帮忙看看了！

备注：内容来源于stack exchange，提问作者ahols