How to implement image loading with webpack loader?

Question

JavaScript

Hello! Trying to smoke React.
There is a task: The image must be imported into the component and processed by the webpack loader.
Can you please explain how to implement this? What to do with him? Is there an example
Thank you

Answer 1

webpack.config.js

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

file-loader
An example of using images in code:

import React from 'react';
import image from './image.png';

const Example = () => (
  <img src={image} />
);

or:

import React from 'react';

const Example = () => (
  <img src={require('./image.png')} />
);