Reactjs – Am I importing this png file correctly? Vite gives me an error, my code below

TypeScript+ React + Vite [plugin:vite:import-analysis] Failed to resolve import "./assets/heropic.png" from "srccomponentsHero.tsx". Does the file exist?

New to react + typescript. I’m trying to create a "Hero" Section for a site and want to render this pick in the background.

I’ve been stuck trying to import a png file from my assets folder to my Hero.tsx file in my components folder. Here’s how tthe code looks:

Hero.tsx in components folder:

import heropic from "./assets/heropic.png";

interface HeroProps {
    children: React.ReactNode;
}

const Hero = (props: HeroProps) => {

return (
    <section> <img src={heropic} /> {props.children} </section>

App.tsx

//import Header from "./components/Header";
import { Navbar } from "./components/Navbar";
import { Routes, Route } from "react-router-dom"; 
import { Container } from "react-bootstrap";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { GetInvolved } from "./pages/GetInvolved";
import { Latest } from "./pages/Latest";
import { ContactUs } from "./pages/ContactUs";
import Hero from "./components/Hero";
function App() {
    return (
        <>
          <Navbar />
          <Container>
            <Routes>
                <Route path="/" element={<[[enter image description here](https://i.stack.imgur.com/jrpOb.png)](https://i.stack.imgur.com/OnbJ9.png)/>} />
                <Route path="/about" element={<About />} />
                <Route path="/GetInvolved" element={<GetInvolved />} />
                <Route path="/Latest" element={<Latest />} />
                <Route path="/GetInvolved" element={<GetInvolved />} />
                <Route path="/Contact" element={<ContactUs />} />
            </Routes>
          </Container>
          <Hero>I'm Hero</Hero>
        </>
     );
}

export default App;

I created a .d.ts file and a folder for it: and have imported react-svg and png

declare module "*.png" {

const value: any;

export default value;

// alt syntax: export = value //

}

I get this error, 2nd pic is of my files

Been stuck for a while, help would be appreciated. Thanks

I believe I need to set up a file loader.