estou com o seguinte componente como navbar em uma aplicação frontend com react
import * as React from 'react';
import { styled, alpha } from '@mui/material/styles';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import InputBase from '@mui/material/InputBase';
import SearchIcon from '@mui/icons-material/Search';
const Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
marginLeft: theme.spacing(1),
width: 'auto',
},
}));
const SearchIconWrapper = styled('div')(({ theme }) => ({
padding: theme.spacing(0, 2),
height: '100%',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}));
const StyledInputBase = styled(InputBase)(({ theme }) => ({
color: 'inherit',
'& .MuiInputBase-input': {
padding: theme.spacing(1, 1, 1, 0),
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
transition: theme.transitions.create('width'),
width: '100%',
[theme.breakpoints.up('sm')]: {
width: '12ch',
'&:focus': {
width: '20ch',
},
},
},
}));
export default function Navbar({pokemonFilter}) {
return (
<Box sx={{ flexGrow: 1, marginBottom:"3em"}}>
<AppBar position="static" sx={{backgroundColor:"#C22E29"}}>
<Toolbar>
<Box display="flex" justifyContent="space-between" width="100%">
<Box component="img" src="/assets/pokelogo.png" alt="logo pokemon" height="3em"/>
<Search onChange={(e) => pokemonFilter(e.target.value)}>
<SearchIconWrapper>
<SearchIcon />
</SearchIconWrapper>
<StyledInputBase
placeholder="Buscar..."
inputProps={{ 'aria-label': 'search' }}
/>
</Search>
</Box>
</Toolbar>
</AppBar>
</Box>
);
}
a imagem na box <Box component="img" src="/assets/pokelogo.png" alt="logo pokemon" height="3em"/>
não está carregando, alguem saberia dizer o que posso fazer?