Next JS app router importing static image problem

  Kiến thức lập trình

I’m currently using the app router in Next.JS. When importing images from the public server using the one below from a reusable component

<img src="assets/icon.png" />

It will import as normal from the index root page and a folder above it. But I noticed when I created a second folder inside a folder above the root that it doesn’t import the images no longer.

Now, it says error that it can’t find the image no longer but I found that when the page does move up 2 routes that it adds the first route into the import.

So lets say I got this folder structure

  • app
  • item
  • [slug]

it will add the item into the import string for some reason like this when I use the component in the slug page as the error would report. Even though the src is normal in the import when I hover over it it says this.

http://localhost:3000/tester/assets/icon.png

instead of

http://localhost:3000/assets/icon.png

Is there any way to stop this from happening in my reusable component?

I’ve tried changing the import with “./” at the beginning or a “/” and it did not work. Next will automatically add the folder below when importing the images from the reusable component.

LEAVE A COMMENT