Nicely done Dimitrios.
When images are placed in the public folder, you will need to access them like you did, via absolute paths. This is useful for static assets that won't change or need to be referenced globally.
If you want Vite to process the images and use imports, then you need to put the images under your src folder. So you could put them in src/assets/images. In this case, you can then import the images and use them where you want them, like so:
import RandomImage from './assets/images/image.png';
const RandomComponent = () => {
return <img src={RandomImage} alt="This is just a random image" />;
};