Next Image组件仅本地正常，其他设备加载崩溃求助

针对你的情况，按下面的步骤排查解决：

• 检查文件名大小写：如果你的设备是Windows，文件名大小写不敏感，但Linux、macOS以及线上服务器是严格区分大小写的。确认public文件夹里的图片实际文件名和代码里的/catI.jpg完全一致，包括大小写。

• 确认父容器的定位配置：使用layout="fill"时，父元素必须是定位元素（relative/absolute/fixed），你当前的position: absolute没问题，但可以给父容器加overflow: hidden，既避免图片溢出，也能确保Image组件正确填充容器。

• 验证图片存放路径：Next.js要求静态图片必须放在项目根目录的public文件夹下，才能用/catI.jpg这种根路径访问。如果图片存放在src或其他目录，其他设备肯定加载失败，赶紧移到public目录下。

• 清除缓存测试：其他设备可能缓存了旧资源，让用户按Ctrl+Shift+R强制刷新页面，线上部署时可以给图片路径加版本号（比如/catI.jpg?v=1）绕过缓存。

附上调整后的代码参考，提升兼容性：

JSX代码 #

<div className="img-container-homePage">
  <Image src="/catI.jpg" alt="Cat" layout="fill" objectFit="cover" />
</div>

新增objectFit="cover"可以让图片自适应容器，避免拉伸变形。

CSS代码 #

.img-container-homePage {
  position: absolute;
  width: 100%;
  height: 90vh;
  z-index: -1;
  filter: brightness(0.5) contrast(0.7) saturate(80%) hue-rotate(10deg);
  overflow: hidden; /* 新增，防止图片溢出 */
}

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