NextJS中无法导入public文件夹内图片的问题求助

问题根源 #

你当前的导入语句指向的是文件夹路径而非具体图片文件，导致无法获取有效图片资源；同时NextJS的Image组件有特定的资源引用规则。

两种可行解决方案 #

方案1：导入具体图片文件 #

修改导入语句，指定完整的图片文件名（比如profile.jpg），同时给Image组件补充必要的尺寸属性：

import profilePic from '../../public/images/profile/profile.jpg'
import Image from 'next/image'

<main className="flex items-center text-dark w-full min-h-screen">
    <Layout>
        <div className="flex items-center justify-between w-full">
            <div>
                <Image 
                    src={profilePic} 
                    alt="个人头像" 
                    className='w-full h-auto' 
                    width={500} 
                    height={500} 
                />
            </div>
        </div>
    </Layout>
</main>

方案2：直接使用public根路径（无需导入） #

public文件夹下的资源可直接通过根相对路径访问，无需导入，直接在src中填写路径即可：

import Image from 'next/image'

<main className="flex items-center text-dark w-full min-h-screen">
    <Layout>
        <div className="flex items-center justify-between w-full">
            <div>
                <Image 
                    src="/images/profile/profile.jpg" 
                    alt="个人头像" 
                    className='w-full h-auto' 
                    width={500} 
                    height={500} 
                />
            </div>
        </div>
    </Layout>
</main>

额外注意事项 #

• 确认图片确实存在于public/images/profile/目录下，文件名和后缀完全匹配（区分大小写）。
• 若使用NextJS 13+ App Router，需确保Image组件从next/image导入，且next.config.js中无限制本地资源的配置。

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