Next.js: 用于图像的 Webpack 加载器将它们移动到静态文件夹

我希望能够导入以下图像：

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

我的装载机看起来像（ 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;
  },
};

结果几乎是好的。

图像文件在.next/static/images/image-ef89065b898bb1e3e802c62e4b264417.png

image变量是/static/images/image-ef89065b898bb1e3e802c62e4b264417.png ，但是当尝试使用http://localhost:3000/static/images/image-ef89065b898bb1e3e802c62e4b264417.png加载图像时，我收到 404 错误。

有任何想法吗？

附： 我不想手动将文件移动到static文件夹。 我希望与某个组件相关的图像与组件本身位于同一文件夹中`