Images not loading Vite/React

Question

So I'm seeing the exact same problem as listed in this question but I'm referencing the image in the way described in the answer (so it seems to me) but still nothing is loading at runtime. Here is my code:

vite config:

const config = defineConfig({
plugins: [react()],
build: {
    outDir: 'dist',
    emptyOutDir: true,
    assetsDir: 'assets',
    minify: false,
},
base: '/static/',
mode: 'development'})

code snippet:

function Navbar(props: Props) {

return <div className="navbar-fixed">
    <nav className="nav-extended white">
        <div className="nav-wrapper white">
            <ul>
                <li>
                    <a href="#!" className="title grey-text text-darken-1">Company Name
                        <img src="/logo.png" alt="logo" className="circle" />
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>}

I've got the following file structure /static/public/logo.png. When vite builds the logo.png is located in the outDir: /static/dist. So it seems i've placed the image in the correct location but the logo will not load in the browser.

filestructure

I have tried using "/logo.png", "logo.png" and nothing works.

My only thought is that the built .js/css files are in /static/dist/assets while the logo is in /static/dist. so I tried using '../logo.png' out of desperation but that doesn't work either.

No matter what I try I always get a 404 error for the image. The URL that the browser is reporting to not work is http://localhost:8000/static/index.html/drive/logo.png which is definitely not where the logo is located. So I'm wondering if its a build error and Vite is not creating the path correctly or if I'm just completely off base with everything I'm doing.

Please any help would be great.