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

字符串
新的React+ typescript 。我试图创建一个网站的“英雄”节，并希望在后台呈现此选择。
我一直在尝试从我的assets文件夹导入一个png文件到我的components文件夹中的Hero.tsx文件。
组件文件夹中的Hero.tsx：

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;

型
我为它创建了一个.d.ts文件和一个文件夹：并导入了react-svg和png

declare module "*.png" {

const value: any;

export default value;

// alt syntax: export = value //

}

型
我得到这个错误，第二张图片是我的文件
卡了一段时间了，如果能帮上忙，我会很感激的。谢谢
我想我需要设置一个文件加载器。