Navbar.js

import React from 'react';
import { Link } from 'react-router-dom';
import './navbar.scss';
import Logo from '../../image/Logo.png';
import Admin from '../../image/eye.png';

export default function Navbar() {
  return (
    <div className='navBar'>
      <div style={{width: "90%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
        <Link to="/">
        <img src={Logo} alt="Logo" className='Logo'/>
        </Link>
        <Link to="/admin">
        <img src={Admin} alt="Admin" className='Admin'/>
        </Link>
          
      </div>
    </div>
  );
}

navbar.scss

.navBar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 10vh;
  }
  
  .Logo, .Admin {
    cursor: pointer;
    padding-top: 3vh;
    width: 5%;
  }

index.js where the route are there

import React from 'react';
import ReactDOM from 'react-dom/client';
import{BrowserRouter,Routes,Route} from "react-router-dom";
import Home from './pages/Home/home.js';
import Err404 from './pages/Error/err404.js';
import CRUD from './pages/CRUD/crud.js'
import Navbar from './pages/Navbar/navbar.js';
import Footer from './pages/Footer/footer.js'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
  <Navbar/>
  <Routes>
    <Route path='/' element={<Home/>}></Route>
    <Route path='/CRUD' element={<CRUD/>}></Route>
    <Route path='*' element={<Err404/>}></Route>
  </Routes>
  <Footer/>
  </BrowserRouter>
);

in this following I just put img and no Link the image are showing but as i do this it is not showing can anyone help me with this?

not showing
without showing

I tried working with scss but I did not find any problem there