Logo isn't loading on nested routes

Question

I am using react-router-dom version 6.11.1. In my header component the logo is a image tag the included image which is in my public folder. In my single route component i can see the logo but when it goes 1 step down route like nested route i can't the see the logo its not loading anymore. In my case it is in reset_password route. I tested with routes as well its is the same. Can anyone help me with this

index.js file

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path='/' element={<App />}>
            <Route index={true} path='/' element={<Homepage />} />
            <Route path='/login' element={<Login />} />
            <Route path='/signup' element={<Signup />} />
            <Route path='/verification' element={<VerifyUser />} />
            <Route path='/forgot-password' element={<ForgotPassword />} />
            <Route path='/dashboard' element={<Dashboard />} />
            <Route path='/reset_password/:id' element={<ResetPassword />} />
        </Route>
    )
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Provider store={store}>
            <RouterProvider router={router} />
        </Provider>
    </React.StrictMode>
);

and header componenet

<header>
            <nav className='navbar navbar-expand-lg'>
                <div className='container'>
                    <Link to='/' className='navbar-brand'>
                        <img
                            className='logo'
                            loading='lazy'
                            src='./images/jk_logo_horizontal.png'
                            alt='logo'
                        />
                    </Link>
                    <div>
                        <ul className='navbar-nav ms-auto mb-2 mb-lg-0'>
                            <li className='nav-item'>
                                <Link to='/login' className='nav-link active' aria-current='page'>
                                    <button className='btn btn-login'>Login</button>
                                </Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

Answer 1

What if you remove the first dot from your logo path? It would look like this:

src='/images/jk_logo_horizontal.png'

This way, you have an absolute path to the logo, regardless if it is a nested route or not.