Next.js: Chargeur Webpack pour les images pour les déplacer vers un dossier statique

Je veux pouvoir importer des images comme :

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

Mon chargeur ressemble à ( 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;
  },
};

Le résultat est presque bon.

Le fichier image est à l'intérieur de .next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image variable /static/images/image-ef89065b898bb1e3e802c62e4b264417.png , mais lorsque j'essaie de charger l'image avec http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png j'obtiens une erreur 404.

Des idées?

ps. Je ne veux pas déplacer manuellement les fichiers vers le dossier static . Je veux que les images liées à un composant soient dans le même dossier que le composant lui-même`