Next.js: Webpack loader for images to move them to static folder

Created on 28 Apr 2017  路  3Comments  路  Source: vercel/next.js

I want to be able to import images like:

import image from './image.png; // image variable should have static url

My loader looks like (next.config.js):

module.exports = {
  webpack: config => {
    // handle images
    config.module.rules.push({
      test: /\.(ico|gif|png|jpg|jpeg|svg|webp)$/,
      use: [
        {
          loader: 'emit-file-loader',
          options: {
            name: 'dist/[path][name].[ext]',
          },
        },
        {
          loader: 'file-loader',
          options: {
            context: 'public',
            name: '/static/images/[name]-[hash].[ext]',
            publicPath: '/',
          },
        },
      ],
    });

    return config;
  },
};

Result is almost good.

Image file is inside .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image variable is /static/images/image-ef89065b898bb1e3e802c62e4b264417.png, but when trying to load image with http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png I get 404 error.

Any ideas?

ps. I don't want to manually move files to static folder. I want images related to some component to be in the same folder as component itself`

Most helpful comment

Currently this is not possible.
We might do something for this sooner.

All 3 comments

Currently this is not possible.
We might do something for this sooner.

Any news on this?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jesselee34 picture jesselee34  路  3Comments

timneutkens picture timneutkens  路  3Comments

kenji4569 picture kenji4569  路  3Comments

sospedra picture sospedra  路  3Comments

YarivGilad picture YarivGilad  路  3Comments