Img wont show Reactjs

Question

New react developer, i'm using webpack and trying to load image, but it wont show it and it is not giving me any error, any idea ?

webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000',
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
  },
};

import Immage from '../../icons/MicrosoftTeamsImage.png';


          <img src={require('../../icons/MicrosoftTeamsImage.png')} alt="icon" />


also tried like this:

<img src={Immage} alt="some example image" alt="icon" />

it shows like this:

those i installed like this: yarn add --save file-loader url-loader

edit: I checked network tab and status is 200, but it shows Request URL: http://..../[object%20Module] i tried to fix it like this <img src={require('../../icons/MicrosoftTeamsImage.png').default} alt="icon" /> and now it says : Request URL: http://..../29691089ca26d06beb2854d687a560cf.png but still image wont show

Answer 1

Take the directory icons that contains the image and put it inside the src directory.

Then adjust the path of the image to be as:

import Immage from '../icons/MicrosoftTeamsImage.png';

And then use this syntax:

<img src={Immage} alt="some example image" alt="icon" />