Next.js Nextjs仅在生产环境中不渲染存储在公用文件夹中的图像

我正在用Nextjs建立一个个人网站，我遇到了一个关于公用文件夹的奇怪问题。根据，静态图像将放在公用文件夹中。这在我的本地开发模式下适用于所有图像。然而，当我用Vercel将其推向生产时，一些图像将无法渲染（显示损坏的图像）。我注意到它似乎可以很好地加载jpg图像，但不能加载png/svg。我不使用next images模块，只使用一个简单的标记

我的文件结构（简化）为：

• 公开的
  • 静止的
    • 墨尔本.jpg
    • 阿凡达.png
• 页数
  • index.jsx

在my index.jsx中（也超级简化）

函数主页（{data}）{
返回(
你试过没有过渡吗？是的，我试过。在生产中仍然不起作用。有过渡和没有过渡在本地开发模式中都能完美地工作。
function Homepage({ data }) {
    
    return (
        <motion.div id='home' initial='initial' animate='enter' exit='exit'>
            <section
                id='intro'
                className='bg-dark flex content-center flex-wrap p-40 justify-center text-center min-h-screen w-screen'>
                <div className='flex flex-col justify-center'>
                    <motion.img
                        src='/static/avatar.png' <-- Works in Dev but not Prod
                        className='flex mx-auto rounded-full h-32 w-32'
                        variants={{
                            initial: { opacity: 0 },
                            enter: {
                                opacity: 1,
                                transition: {
                                    ease: 'easeIn',
                                    duration: 0.5,
                                    delay: 0.75,
                                },
                            },
                        }}
                    />
                </div>
            </section>
            <section id='about' className='bg-light w-screen p-10'>
                <div className='h-2 border-t-4 border-dark w-10/12 flex flex-column mx-auto mt-12' />
                <div className='w-1/3 mx-auto relative bottom-12 bg-light'>
                    <h1 className='font-header text-center'>About Me</h1>
                </div>
                <div className='flex mx-auto mb-8 w-11/12 md:w-3/4 grid grid-cols-3 gap-6 lg:grid-cols-3'>
                    <div className='py-8 col-span-2'>
                        Some text here
                    </div>
                    <div className=''>
                        <img
                            className='rounded-full w-full h-full'
                            src='/static/Melbourne.jpg' <-- Works in Dev & Prod
                            alt='melbourne-skyline'
                        />
                    </div>
                </div>
                
            </section>
            
        </motion.div>
    );
}

export default Homepage;