[Solved]-Webpack 5 images not found when importing to a module-Reactjs

Your image appears to exist, only it has been renamed with the with a hash key prefix. This is to get around image cache issues when the file name doesn't change, but the image has. Normally the plugin is smart enough to fix most but NOT all of the references to the rename.

To check whether your image file is actually being written to disk you can temporarily alter the assetModuleFilename key to use the original name and file extension as shown in the section below. If your image file is unlikely to change you can probably make this change permanent. You should now hopefully see the file in the browser!

Otherwise workaround by manually replacing the new hashed name of the image referenced in your config or other files where necessary. A map file manifest.json of all hash entries can be generated by the plugin automatically

example:

  output: {
    publicPath:"", // default is "auto"
    path: path.join(__dirname, "build"),
    filename: "[name].bundle.js",
    clean: true,
    assetModuleFilename: '[name][ext]'
  },

Warning! Do not put a period mark(.) between the substitutions in the assetModuleFilename key as is done in the filename key or you may get a file not found error.