Latest Update

It works now as of next@v11.0.1. No need to follow the steps below.

Disable the static images feature for now as a workaround:

// next.config.js

module.exports = {
  images: {
    disableStaticImages: true
  }
}

Update: This has been fixed in next@11.0.1-canary.4. Install it:

$ npm install next@canary

See the related issue & the PR.

Disable Static Imports

-Since version 10.0.0, Next.js has a built-in Image Component and Automatic Image Optimization

The default behavior allows you to import static files such as import icon from './icon.png and then pass that to the src property. In some cases, you may wish to disable this feature if it conflicts with other plugins that expect the import to behave differently. You can disable static image imports with the following configuration below.

  // next.config.js
  
  images: {
        disableStaticImages: true
    }

I just removed my image/css loader config from webpack (next.config.js) and it started working.

In next.config.js you can add file type checks and handlers. I know that svg can be handled by putting the following code and downloading the npm package @svgr/webpack so there could possibly be a .png equivalent

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

    return config;
  },
};

One example that could work is this code from this stack overflow

module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: [
            {
              loader: 'file-loader',
            },
          ],
        },
      ],
    }
};

I know this answer wasn't 100%, but hopefully it helps out a little bit

look to the issue in the GitHub repo Fix types for the static image it will be work right now

https://github.com/vercel/next.js/pull/25808

  module.exports = {
  images: {
    disableStaticImages: true
  }
}