Image is not displaying in react app after export-CodePudding

I am writing a react application. I am trying to export an image to my nav bar from my constants and it will not show up. I don't see any error messages, it just shows a blank screen. I did confirm the url goes to the image.

src/utils/contstants.js

export const Logo = 'https://www.freepnglogos.com/uploads/youtube-logo-hd-8.png';

src/components/Navbar.js

import { Stack } from '@mui/material';
import { Link } from 'react-router-dom';

import { Logo } from '../utils/constants';

const Navbar = () => {
  <Stack
    direction="row"
    alignItems="center"
    p={2}
    sx={{ position: 'sticky', background:'#000',top:0, justifyContent:'space-between'}}
    >
    <Link to="/" style={{ display: 'flex', alignItems:'center'}}>
      <img src={Logo} alt="logo" height={45} />
    </Link>
  </Stack>
}

export default Navbar

App.js

import React from 'react'
import { BrowserRouter, Routes, Route} from 'react-router-dom';
import { Box } from '@mui/material';
import { Navbar, Feed, VideoDetail, ChannelDetail, SearchFeed} from './components';

const App = () => (
    <BrowserRouter>
        <Box>
            <Navbar />
            <Routes>
                <Route path="/" exact element={<Feed />}/>
                <Route path="/video/:id" element={<VideoDetail />}/>
                <Route path="/channel/:id" element={<ChannelDetail />}/>
                <Route path="/search/:searchTerm" element={<SearchFeed />}/>
            </Routes>
        </Box>
    </BrowserRouter>
);

export default App

HOWEVER If i do

   return(
     <img src={logo}/>
   )

It works

CodePudding user response：

You forgot to return here:

const Navbar = () => {
  return <Stack
    direction="row"
    alignItems="center"
    p={2}
    sx={{ position: 'sticky', background:'#000',top:0, justifyContent:'space-between'}}
    >
    <Link to="/" style={{ display: 'flex', alignItems:'center'}}>
      <img src={Logo} alt="logo" height={45} />
    </Link>
  </Stack>
}