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
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found

Submitted

QR Code page using Tailwindcss

Gulimanto 130

@VarunRele

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


For some reason the images isn't getting loading in github pages

Community feedback

@Eileenpk

Posted

Hi Gulimanto! your project looks great, I see that you are using Vite for this project. In the Vite framework, the public folder is the root directory for static assets that are served directly by the server. This means that any files placed in the public folder can be accessed by a client by simply requesting the file at its relative path.

So to make your image show up, move the image folder into the public folder, you can then reference it in an HTML file like this:

<img src="/images/image-qr-code.png" alt="My Image">

If you try to reference a file that is outside of the public folder, the server will not be able to access it and the file will not be served to the client.

It's worth noting that the public folder is not the only place where you can store static assets in a Vite project. You can also use the static directory, which is a sibling of the src directory and is also served directly by the server. However, the public folder is generally used for assets that need to be directly accessible by the client, such as images, fonts, and other media files.

If you found this helpful please mark it as such :)

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