Question

我正在使用Nextjs构建个人网站，并且遇到了Public文件夹的怪异问题。对于documentation，静态图像将放置在“公共”文件夹中。这对于我本地开发模式下的所有图像都非常适用。但是，一旦我将其用Vercel投入生产，某些图像将无法渲染（显示损坏的图像）。我注意到它似乎可以很好地加载jpg图像，但不能加载png / svg。我不使用next-images模块，而只是使用一个简单的标签。

我的文件结构（简体）是：

公共
- 静态
  - Melbourne.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;

请忽略任何可能的语法错误，一切都可以正常进行，并且我删除了很多内容以简化此操作。我遇到的唯一问题是标签。

在此先感谢您的帮助！

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

0 个答案: