NextJS - public images won't work in dynamic routes

Question

This is the look in normal pages, logo card's floating logo

And this is what happens in dynamic routing, logo card's floating logo

It works if I try adding forward slash before the image name, however, it will not work if I deploy my project to GitHub pages.

I want it to be works fine in both local and in live.

Answer 1

Open the dev tools in your browser(normally F12), open the Network tab. and refresh page. you will find what happened to images you are looking for. Please provide more information. Or you can send a link to your project.

Answer 2

Next.js requires a forward slash when importing images from the public directory. So the accurate call would be:

<Image src="/logo.png" alt="Logo"/>

I assume you have not added your local images to your Git repository, as Git typically ignores images.

git add -f public/logo.png

Read more about git add here.