Next.js Unable to serve dynamic images on the runtine

Question

So I am using Next.js API for the backend of my project and Mongodb for the database. I have to serve images which have been uploaded by users on the runtine. As these files weren't available yet during the build time, they are not recognized as static files which can be stored in public directory.

I have tried next-images, added some configurations in the next.config.js and in my code: <img src={require(../../../images/${picture.src})} alt={picture.legend} />.

But still I have this error:.

I also tried with file-loader but still got no luck.

What did I miss?

Thanks for any reply!

james · Accepted Answer · 2020-06-01 02:12:52Z

1

This configuration has worked for me in the past when running into these issues with loading images and/or fonts:

npm install url-loader --save-dev
next.config.js

module.exports = {
  webpack: function (config) {
    config.module.rules.push({
      test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          name: '[name].[ext]',
        },
      },
    });
    return config;
  },
}

answered Jun 1, 2020 at 2:12

james

5,26610 gold badges43 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Horacio Soldman Over a year ago

Thank you @james but unfortunatelly, it didn't solve the issue. I still get the same error.

james Over a year ago

Try changing the extension of your image from .JPG to .jpg. Both the regex I posted as well as next-images expects a lowercase extension on your file.

Horacio Soldman Over a year ago

Thank you, yes that solved the issue related to loading the images. Now the images are shown as they are stored in public folder. However when I build the project and upload new images afterwards, all these new images are still not found even though they are located in the same directory as the previously added ones.

TigerCode Over a year ago

@HoracioSoldman did you find a solution to this?

Horacio Soldman Over a year ago

@TigerCode Unfortunately, the way I got around with it was to create a very basic express server which only serves the dynamic images. Probably this issue was fixed in recent versions of Next.js.

Abderazak Amiar · Accepted Answer · 2024-03-04 11:41:15Z

0

The public folder is only used to store static content, and not dynamic content. That's why when you rebuild the files will be available.

Your qestion answered from Github

answered Mar 4, 2024 at 11:41

Abderazak Amiar

8169 silver badges24 bronze badges

Collectives™ on Stack Overflow

Next.js Unable to serve dynamic images on the runtine

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related