[Fixed] How to link images from outside of the next js project folder

Issue

I’m working on a project where I’m node.js and express for the back-end and next js for the front-end.

I have a form where users can create new products every product has an image.

I’m using multer for image uploads and saving the images inside the uploads folder.

In next js I’m using an image path like this:

/uploads/imag-name.png

But I’m getting could not load the image.

here’s my folder structure

Website
--------
  client
  -------
    components
    pages
    public
    styles
    ...

  uploads
  -------
    image-name.png
    ...

  server
  ------
    config
    controllers
    middlewares
    models
    routes
    utils
    server.js

Solution

Move your uploads directory into your client/public director so the structure should look like this

Website
--------
  client
  -------
    components
    pages
    public
      uploads
         -------
         image-name.png
    styles
    ...