I am currently in the process of developing a portfolio website using react js, but I'm experiencing an issue where the image I intended to display is not showing up on the live site. Despite thoroughly checking my code, I can't seem to identify any errors causing this problem. Could someone please assist me in pinpointing what might be going wrong?
Below is the segment of the code where the image is embedded
import Logo from '../../assets/fts_black.png'
const Header = () => {
return (
<header>
<div className="container header__container">
<div className="me">
<img src={Logo} alt="Logo" />
</header>
)
}
export default Header
The following snippet displays the CSS code related to styling the image
.me{
background: var(--color-primary);
width: 22rem;
height: 30rem;
position: absolute;
left: calc(50% - 11rem);
margin-top: 4rem;
border-radius: 12rem 12rem 0 0;
overflow: hidden;
padding: 5rem 1.5rem 1.5rem 1.5rem;
}
Despite successfully applying styles as per the CSS code provided above, the image still fails to load. Any suggestions or assistance would be greatly appreciated.