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

Time Tracking Dashboard

@Yashbabani0

Desktop design screenshot for the Time tracking dashboard coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

Can anyone help me? Everything works fine in my local environment, but after uploading to Vercel and Netlify, the background color for the data box and all images are not showing.

Community feedback

Roman 110

@bWoodyR

Posted

There might be 2 ways how to fix your images.

1. Add images to "public" folder inside "root"

  • this way you can access image in your component like:
<img src="/image.png" alt="image" />

2. Add images to "assets" folder inside "src" folder

  • folder name "assets" don't really matter here, you can call it whatever you want

inside your component where you want to use it, you can import image like:

import Image from "../assets/image.png"

and then use it

<img src={Image} alt="image" />

Obviously you can change name's and path's as you wish. Btw nice solution

Marked as helpful

1

@Yashbabani0

Posted

@bWoodyR Thanks bro for the help!

0

@LilyEliG

Posted

I just checked your GitHub and I see that your newest commit for the images says errors fixed. I am not sure if that means you have fixed the image rendering issues however, when I happen to have issues with image rendering, I get rid of the image directory and put all images in the root directory. That usually works and I hope it works for you. If it doesn't you can reply to my comment and I will give another solution.

I also think you can reduce the width of the activity boxes as they are a little too wide at the moment.

Good job on your solution though!

Marked as helpful

1

@Yashbabani0

Posted

Hi @LilyEliG,

Thank you for the suggestion! I’ve tried various methods to fix the image rendering issues, including moving the images to the root directory and converting SVGs to PNGs, but unfortunately, none of them have resolved the problem for deployment on Netlify and Vercel. The images display correctly on localhost, but the issue persists when deployed.

If you have any other solutions or ideas, I’d appreciate your help.

1

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