There are several threads about this one issue, but none of them have yielded any results to me so far. As the title suggests, my React project contains an img tag, where a png is provided as it's source.

So far, I have tried using requiring the path AND importing it as a variable. I have also added the loaders in my webpack config as you can see below.

Also of note is that the dimensions are actually loaded, and when right clicking to check the image source, the website returns a Cannot GET /[object Object]

Any insight is greatly greatly appreciated!

Thank you in advance!

Image Tag

 <img src={require('./mug1.png').default} className="mugImage" />

CSS

.mugImage {
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 10;
}

Webpack

const HtmlWebPackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});
module.exports = {
  mode: "development",
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      crypto: require.resolve('crypto-browserify'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      os: require.resolve('os-browserify/browser'),
      stream: require.resolve('stream-browserify'),
    },
  },
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: "babel-loader"
      }
    },
    {
      test: /\.css$/,
      use: ["style-loader", "css-loader"]
    }, {
      test: /\.(jpg|png|svg)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 25000
        }
      }
    },
    {
      test: /\.(png|jpe?g|gif)$/i,
      use: [
        {
          loader: 'file-loader',
          options: {
            esModule: false,
          },
        },
      ],
    },



    ]
  },
  plugins: [htmlPlugin]
};

CodePudding user response：

You don't need to use both loaders. Both loaders url-loader and file-loader work the same, but the difference is url-loader can be configured with limit to smaller files to be inlined like DataURL. Like

data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgX193ZWJwYWNrX3B1YmxpY19wYXRoX18gKyAiNDRlYTU1N2FlYmM4ZTM2Y2EyOGQ2N2RlM2YwMWM2MWMucG5nIjs=

Another thing is that file-loader emits assets to the output directory on the build. If you choose to use url-loader

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(jpe?g|png|svg)$/,
        use: [{          {
          loader: 'url-loader',
          options: {
            limit: 25000 //asset size limit in byte
            name: '[name].[ext]',
            outputPath: 'assets/images/'
          },
        }]
      },
    ]
  },
  plugins: [...]
};

Assets size lower than configured will be inlined with DataURL no asset will be emitted. Greater will be handled as a separate file. for file-loader try

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

Here keep es syntax and don't change it to CommonJS by esMoulde: false. Remove from your code.