Design comparison
Solution retrospective
I am proud for using react and vite for completing this project. I think that this challenge helped me to understand how the react framework works.
What challenges did you encounter, and how did you overcome them?The project structure that Vite provided me with is something that I wasn't able to fully understand. It took me a lot of time to understand why I could display the images to the production environment.
What specific areas of your project would you like help with?I would like to understand better the folder structure that vite provided me with. I wasn't sure where should i actually put the images that in order for vite to find the correct paths. I did it manually be replacing the urls with absolute paths.
Community feedback
- @zs-kevPosted about 1 month ago
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" />; };Marked as helpful0 - @MaobugichiPosted about 1 month ago
nice job!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord