Nextjs不渲染仅在生产中存储在公用文件夹中的图像

Question

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

我的文件结构(简化(为：

• 公共

  • 静态

    • 墨尔本.jpg
    • avatar.png
• 页码
  • index.jsx

在我的index.jsx(也是超级简化的(中

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;

请忽略任何可能的语法错误，一切都对我有利，我删除了很多东西来简化这一点。我遇到的唯一问题是标签。

提前感谢您的帮助！

Answer 1

添加新资产后，您必须重新生成[npm run build]项目，然后提交更改。