Issues Referencing an Image In ReactJS - node.js

Question

I hope you're holding on in these hard times. I'm building a React app but by configuring the webpack first. So, I'm trying to use an image by importing it or referencing it in the image tag but it's not working as it should. May anyone please tell me what I'm doing worng? Thanks in advance.
My webpack file
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'
})
]
}
My Navbar file
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;
Server Error
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.