How to display public images in browser?

I have a following folder structure

.
├── public
├──└──images
├──└── image1.png
├──└── image2.png
├── src
├── vite.config.js
└── [...]

vite.config.js

const path = require('path')

export default {
    root: path.resolve(__dirname, 'src'),
    server: {
        port: 3000,
        hot: true
    },
    publicDir: 'public'
}

How can I access images under public folder ? I tried this from browser

• http://127.0.0.1:3000/public/images/image1.png
• http://127.0.0.1:3000/images/image1.png

But it gives "Not found"

Can anybody help me ?

>Solution :

According to the docs here

publicDir

Directory to serve as plain static assets. Files in this directory are served at / during dev and copied to the root of outDir during build, and are always served or copied as-is without transform. The value can be either an absolute file system path or a path relative to project root.

So your publicDir must be relative to the root address you set, so you need to either change the root address to the folder above src, or change the publicDir path.