Chakra UI结合Next.js使用时无法加载本地图片问题求助

在使用Chakra UI搭配Next.js开发的过程中，遇到本地图片无法正常加载的问题。
使用的代码如下：

<Image src="./homepage/footer/Black.svg" />

项目文件夹结构如下：

控制台输出的报错信息如下：

根因 #

该问题由静态资源引用路径不符合Next.js规则导致，所有放在public目录下的静态资源，引用时需直接写相对于public目录的根路径，不能添加./相对路径前缀，也不需要额外添加/public前缀。

修复方法 #

直接修改Image组件的src属性即可：

<Image src="/homepage/footer/Black.svg" />

其他排查项 #

• 确认Black.svg文件实际存放路径为public/homepage/footer/Black.svg，文件名大小写与引用路径完全匹配，Next.js生产环境对路径大小写敏感，本地开发环境可能存在大小写不敏感的情况，容易引发生产环境偶发加载失败问题。
• 如果项目中同时引入了Next.js原生Image组件和Chakra UI的Image组件，需避免命名冲突，建议使用别名区分：

import NextImage from 'next/image'
import { Image as ChakraImage } from '@chakra-ui/react'

• 若使用的是Next.js原生Image组件，还需要补充width、height属性，或使用fill属性搭配父容器的相对定位样式，否则会触发布局类报错。

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