Nextjs: Unable to load images from static folder

reactjs webpack nextjs
Vaggelis Stefanakis picture Vaggelis Stefanakis · Mar 22, 2018 · Viewed 18.8k times · Source

How can I load images in a component in Next.js? Do I have to build the project first? If yes, is there a way to load the images without building first? I cannot get this to work, no matter what I try.

Answer

Tomasz Mularczyk picture Tomasz Mularczyk · Mar 22, 2018

from the docs:

Next.js can serve static files, like images, under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

So, first add an image to public/my-image.png and then you can reference it:

<img src="/my-image.png" />

I think next.js will have a watch on this directory so you won't need to restart your server every time you put something in there.

Related questions

Correct path for img on React.js

I have some problem with my images on my react project. Indeed I always thought that relative path into src attribute was built on the files architecture Here my files architecture: components file1.jsx file2.jsx file3.jsx container img …

Read More
How to import and export components using React + ES6 + webpack?

I'm playing around with React and ES6 using babel and webpack. I want to build several components in different files, import in a single file and bundle them up with webpack Let's say I have a few components like this: …

Read More
babel-loader jsx SyntaxError: Unexpected token

I'm a beginner in React + Webpack. I found a weird error in my hello world web app. I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax. Here are …

Read More