Next.js Discord

Discord Forum

How to import static files correctly?

Unanswered
Crucian carp posted this in #help-forum
Open in Discord
Crucian carpOP
Hi guys, I am currently importing my static images like this: import pic1 from "../../../public/images/pic1.jpg";

For example, I can use placeholder="blur" without any further detours.

If I simply import the images via src="/images/pic1.jpg", the placeholder="blur" does not work just like that, for example.

So what am I doing wrong, or what is the better alternative?

5 Replies

Crucian carpOP
Bump
When you provide the path directly via src="/images/pic1.jpg", it's treated as a remote image so it doesn't calculate blur (or width & height)
The first one import pic1 from "../../../public/images/pic1.jpg"; is correct, but you wouldn't typically keep those in public - they'd go in an assets folder or similar