Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

results-summary-component-main-react

@dimitrisdr

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

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

P
Kevin 230

@zs-kev

Posted

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" />;
};
0
Maobugichi 390

@Maobugichi

Posted

nice job!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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