In my project using Vite (^2.9.7
) I have a public
folder in my root
directory which contains some images.
I'm importing the images using Vite's import.meta.glob
function, e.g.
import { LazyBlock } from "../LazyBlock";
const images = import.meta.glob("./home/*.(jpg|png|jpeg)");
export function Gallery() {
const blockImages = Object.keys(images);
return (
<div className="flex justify-center w-full">
<div className="flex flex-wrap justify-center min-h-8">
{blockImages.map((image, index) => (
<LazyBlock url={image} key={index} />
))}
</div>
</div>
);
}
While running in localhost, it works perfectly but there's an annoying warning saying to remove the /public
:
files in the public directory are served at the root path.
Instead of /public/home/1.png, use /home/1.png.
But removing it, the images stop working.
But the main problem is when I build and deploy the project, the public
folder stop existing and the route used stop working, but if change the src path in devtools, it simply works...
There's some configuration am I missing?