Create-React-App unable to find my images folder - reactjs

Question

I am having trouble with my React web app as it cannot find my images folder. I have a Navbar component inside a nav folder inside my component folder. Just outside the component folder is the assets folder which houses my img folder.
Like so:
src/
assets/
img/
logo.png
components/
nav/
Navbar.js
Failed to compile.
./src/components/nav/Navbar.js
Module not found: Can't resolve './assets/img/logo.png' in 'C:\xampp\htdocs\MXlionsfieldReact\mxlionsfieldreact\src\components\nav'
Here is my Navbar.js component:
import React, { Component } from 'react';
import Logo from './assets/img/logo.png';
class CustomNavbar extends Component {
render() {
return(
<nav className="navbar navbar-expand-md navbar-dark transparent-nav-custom fixed-top" id="navbar"><a className="navbar-brand" href="/"><img className="pb-2 logo-image" src={Logo} alt="Lionsfield brand Logo" /></a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"><span className="navbar-toggler-icon"></span></button>
<div className="collapse navbar-collapse" id="navbarsExampleDefault">
<ul className="navbar-nav ml-auto">
<li className="nav-item"><a className="text-center nav-link" href="/"><i className="fa fa-home"></i><br />Inicio <span className="sr-only">(current)</span></a></li>
<li className="nav-item"><a className="text-center nav-link" href="/Quienes-Somos"> <i className="fa fa-users"></i><br />Quienes Somos</a></li>
<li className="nav-item"><a className="text-center nav-link" href="/NuestrosClientes"> <i className="fa fa-building"></i><br />Nuestros Clientes</a></li>
<li className="nav-item"><a className="text-center nav-link" href="/Metodologia"><i className="fa fa-line-chart"></i><br />Metodología</a></li>
<li className="nav-item"><a className="text-center nav-link" href="/Certificaciones"><i className="fa fa-graduation-cap"></i><br />Certificaciones</a></li>
<li className="nav-item"><a className="text-center nav-link" href="/Contacto"> <i className="fa fa-envelope"></i><br />Contacto</a></li>
</ul>
</div>
</nav>
)
}
}
export default CustomNavbar
I am running Node version 10.15.1, NPM version 6.9.0.

Answer 1

This is what you're looking for.
import Logo from '../../assets/img/logo.png';

Answer 2

Your import is expecting assets to be under the nav directory.
Create-React-App's webpack config is pretty flexible, and will allow
import Logo from 'assets/img/logo.png';
or
import Logo from '../../assets/img/logo.png';
Although if you were to move your components folder in the future, it'd break this import.
Check out the Create-React-App documentation for absolute imports here:
https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports

Answer 3

Use ../../assets/img/logo.png as the relative path of your logo. . represents the current directory while .. represents the parent directory.