So im new with react and i have made a react project using create react app. Im trying to import an image to use in one of my components. I know that in react to use images you import them using an import statement with the relative path to your image.
However whenver i try to import the image, react wont or cant find any of my images when i put in the relative path. In vs code you can autocomplete the paths but when i navigate to my images folder it appears empty as if vs code or react cant find any images even though there are some. I wasnt sure if this is a bug with vs code or react so i double checked by trying to import an image in the index.html file and of course it works using the relative path to the image as the src and i can find the images which leads me to believe its a react issue.
What could be causing this. Its a strange issue that i could not find an awnswer for online and any tutorial i watch on youtube is able to use the import statement perfectly for their images. Just to show my code i have pasted it below. The two images i have imported do not get detected in my browser and the app fails to compile
import React from "react";
//import assets from images folder
import RMDBLogo from '../../images/logo.jpg';
import TMBDLogo from "../../images/tmbd_logo.svg";
//import styled components from the header .styles file
import { Wrapper, Content, LogoImg, TMBDLogoImg } from "../Header/header.styles";
const Header = () => (
<Wrapper>
<Content>
<LogoImg src={RMDBLogo} alt="rmbd-logo"></LogoImg>
<TMBDLogo src={TMBDLogo} alt="tmbd-logo"></TMBDLogo>
</Content>
</Wrapper>
)
export default Header
