Nextjs not Rendering Images Stored in Public Folder in Production Only

Question

I'm building a personal website with Nextjs and I'm encountering a weird issue with the Public folder. Per the documentation, static images are to be put in the Public folder. This works perfectly for all images in my local development mode. However, as soon as I push this to production with Vercel, some images would fail to render (showing broken image). I noticed it seems to load jpg images fine but not png / svg. I don't use next-images module and just use a simple tag.

My file structure (simplified) is:

• public

  • static

    • Melbourne.jpg
    • avatar.png
• pages
  • index.jsx

In my index.jsx (also super simplied)

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;

Please ignore any possible syntax error, everything works on my end and I deleted a lot of things to simplify this. The only issue I'm encountering is the tag.

Thanks in advance for your help!

Answer 1

You have to rebuild [ npm run build ] the project after adding new assets, then commit the changes.