Проблемы со ссылкой на изображение в ReactJS

Question

Я надеюсь, что вы держитесь в эти трудные времена. Я создаю приложение React, но сначала настраиваю веб-пакет. Итак, я пытаюсь использовать изображение, импортируя его или ссылаясь на него в теге изображения, но оно не работает должным образом. Кто-нибудь может сказать мне, чем я занимаюсь? Заранее спасибо.

Мой файл веб-пакета

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js', 
  output: {
      path: path.join(__dirname, '/dist'),
      filename: 'index_bundle.js',
      publicPath: 'dist'
  }, 
  devServer: {
    inline: true,
    contentBase: './dist', 
    port: 8080
 },
 performance: {
  hints: 'warning',
  maxEntrypointSize: 400000

},
  module:  {
      rules: [
            {
              test: /\.(js|jsx)$/, 
              exclude: /node_modules/,
              use: [
                  {loader: 'babel-loader'},
                ]
              },
              {
                test: /\.css$/,
                 use: ['style-loader', 'css-loader']
              },
              {
                test: /\.(jpg|png|svg)$/,
                use:{
                  loader: 'url-loader',
                }
              },
              {
                resolve: {
                  alias: {
                    public: path.join(__dirname, '/public')
                  }
                }
              }
          ]
  },

  plugins: [
      new HtmlWebpackPlugin({
          template: './index.html'
      })
  ]
}

Мой файл Navbar

import { NavbarBrand, Navbar, NavLink } from 'reactstrap';
import logo from '../public/clean_boy';


const imageStyle={
    height: "60px",
    width: "100%",
    padding: "20px 20px -10px 10px",
    marginRight: "10px"
}
const NavBar = () => {
    return (
        <div>
            <Navbar dark color="dark">
                <NavbarBrand href="/" className="fluid"><img src={logo} style={imageStyle}/>Domestic Workers</NavbarBrand>
                <NavLink href="#">Log In</NavLink>
            </Navbar>
        </div>
    )
}

export default NavBar;

Сервер Ошибка

Module not found: Error: Can't resolve '../public/clean_boy' in '/Users/moise.rwibutso/Andela - Sims Apps/Domestic-workers-system/UI/components'
 @ ./components/NavBar.js 3:0-39 19:9-13
 @ ./components/App.js
 @ ./index.js
ℹ ｢wdm｣: Failed to compile.