Images are "broken" icon, no errors in console

[FunctionDJ]

What i see in the browser:

I have all optional packages installed, and sharp. Both the dev (using optimizeImagesInDev) as well as the static site build show this broken icon.
I've also tried appending ?webp but same result.

React:

<img src={require("../public/images/myImage.png")} />

next.config.js:

const path = require("path");
const optimizedImages = require("next-optimized-images");
const withPlugins = require('next-compose-plugins');

const plugins = [
  [optimizedImages, {
    optimizeImagesInDev: true,
    inlineImageLimit: 128,
    responsive: {
      adapter: require("responsive-loader/sharp"),
    }
  }]
];

const nextConfig = {
  webpack: config => {
    config.module.rules.push(      {
      test: /\.(jpe?g|png|webp)$/i,
      use: {
        loader: 'responsive-loader',
        options: {
           adapter: require('responsive-loader/sharp')
        }
      }
    });
    
    return config;
  },

  // some other config i omitted
};

module.exports = withPlugins(plugins, nextConfig);

HTML in browser:

<img src="/_next/static/images/myImage-50bf1e120c8986d1c5fe3a16268f5188.png" class="jsx-644730156">

When opened in a new tab:

In the Sources tab:

[xstable]

Same here today.
I've found the issue at least.

const withPlugins = require('next-compose-plugins');
const withOptimizedImages = require('next-optimized-images');
const withPWA = require('next-pwa');

/* const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
}); // only for Dev-Phase, REMOVE for production!
*/

const nextConfig = {
  webpack(config) {
    config.module.rules.push(
      {
        test: /\.(eot|ttf|woff|woff2)$/,
        use: {
          loader: 'url-loader',
          options: {
            limit: 100000,
            esModule: false,
            name: '[name].[ext]',
          },
        },
      },
      {
        test: /\.ya?ml$/,
        use: 'js-yaml-loader',
      }
    );
    return config;
  },
};

module.exports = withPlugins(
  [
    [
      withOptimizedImages,
      {
        optimizeImagesInDev: true,
        handleImages: ['jpg', 'jpeg', 'png', 'svg', 'webp', 'gif'],
      },
    ],

    // [withBundleAnalyzer],
  ],
  nextConfig
);

In my webpack-config : url-loader I had jpg|jpeg|png. After removing this, it works like expected.
Thats a really difficult error, because some Images still work with this configuration, other not.

At least it depends on the way next-optimized-images work. It injects files with smaller-file-size as data: but bigger files will be included via path-string.
In my case, "smaller files" cause the error, while the big ones work like expected.
Hope that helps somebody out.

[FunctionDJ]

Yes!!! @xstable You're a hero! It was my responsive-loader rule, so simply my inexperience with webpack xP
Thank you very much!!