Загрузить изображение в React JS

Мне нужно загрузить локальный JPG-файл, путь к которому передаётся через props компонента. Пытаюсь это сделать, используя require, но изображение не показывается. Выведя полученный объект в консоль, обнаружил, что был получен модуль:

Module {default: "/ff5a7601c48dcb99c92acfca45eb2439.png", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

Если же загружаю изображение через import, то путь оказывается правильным:

/fa8b72877658d9175b437ebb88e3ef2c.jpg

Проблема заключается в том, что require импортирует изображение как модуль, или в чём-то другом? Как её исправить? Привожу JSX моего компонента:

import React from 'react';
import { Card } from 'react-bootstrap';

import '../../../resources/scss/style.scss';

class ArticleCard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    const { article } = this.props;

    return (
      <Card>
        <Card.Img variant="top" src={require(article.imagePath)} />
        <Card.Body>
          <Card.Title>{article.title}</Card.Title>
          <Card.Text>{article.description}</Card.Text>
        </Card.Body>
      </Card>
    )
  }
}

export default ArticleCard;

и webpack.config.js:

{
   test: /\.(jpe?g|png|gif|svg|jpg)$/i,
   use: {
      loader: 'file-loader',
      options: {
         name: 'client/resources/images/[name].[ext]',
         outputPath: 'dist/img/',
      },
   },
},