Next.js: छवियों को स्थिर फ़ोल्डर में ले जाने के लिए वेबपैक लोडर

मैं छवियों को आयात करने में सक्षम होना चाहता हूं जैसे:

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 फ़ोल्डर में नहीं ले जाना चाहता। मैं चाहता हूं कि कुछ घटक से संबंधित छवियां घटक के समान फ़ोल्डर में हों`