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

Notification Page Vite + React

@Nospiel-code

Desktop design screenshot for the Notifications page 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?

This is the first project I realized with Vite + React. When I run the code locally everything looks just as it should but on GitHub the images are not loading.

Can someone please help me with that issue? Thanks

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

Cool work, I like that you make it possible to mark them as read by click =)

As the previous commentator noted your images aren't loaded. This is a path issue - you shouldn't add public folder into the path as Vite doesn't include it in the build. So this part would work - src="images/avatar-mark-webber.webp".

Than I suggest you to slightly improve your semantic tags. The top level header is the element that repeated in every page of the site and usually contains logo, navigation and stuff. So that is no global header in this project. All this should be inside main (for example you can use main as root for building app).

Also there is the list of notifications, so they should be li tags inside ul.

Hope that helps =)

2

@Nospiel-code

Posted

@Alex-Archer- I thanks a lot, your comment is really helpful :) I am going to make the changes today and upload everything

1

@Nospiel-code

Posted

Hi Alex,

I tried your solution with src="images/avatar-mark-webber-webp" and the images are stil not loading.

I found another solution to include the base path if it was changed (which I did) so I tried src="/fm-notification-page/images/avatar-mark-webber-webp" that also didn't work.

Finally, I tried to move the images into to src-folder as Abduljelil suggested and still no images.

Do you know what could be the issue here?

Thanks in advance

1
Alex 3,130

@Alex-Archer-I

Posted

@Nospiel-code

Is this exactly how you wrote it?

src="images/avatar-mark-webber-webp"

Cos you wrote the file name wrong. It should be ...webber.webp not ...webber-webp.

0

@Nospiel-code

Posted

@Alex-Archer-I

Sorry, but in the code it was ...webber.webp I just made a mistake here in the comment

0
Alex 3,130

@Alex-Archer-I

Posted

@Nospiel-code

Well, when I try to change the path to src="images/avatar-mark-webber-webp" in the dev console it works. Alas, I can't attach screen here.

It's hard to say what the problem is without seeing what are you doing. I'll try to download your project and look on it. Also you can reach me on the discord - archerthecat0851. At least it's possible to exchange screenshots there.

0

@Nospiel-code

Posted

@Alex-Archer-I

Ok, I will try again. Thanks so much for your help :)

0
Abduljelil 150

@jelilking

Posted

I really like your work 👍! It's interesting that we're both learning from the same resource. I noticed you're having some trouble with images not showing after deployment. In my experience, moving the images folder from the public folder to the src folder can help with that.

2

@Nospiel-code

Posted

@jelilking thanks for your comment ☺ I will make the changes today

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