Skip to content
Submitted almost 2 years ago

QR Code Component

Michelle Wayua•150
@Mishywayu
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I found it difficult to deploy the project on GitHub pages. Though I managed my way through. However, once I click the live site URL, the image is not displayed in the browser. I have tried looking for the solution to it but found none. Anybody help please.

Community feedback

  • Steven Noyes•270
    @SteveNoyesPosted almost 2 years ago

    If you change your background image in your css it will show your image. The file path just needs a period. background-image: url(./image-qr-code.png); CSS Line: 22

    0
    Michelle Wayua•150
    @MishywayuPosted almost 2 years ago

    @SteveNoyes Hello, I have made the change and pushed the changes. Still the image is not displayed.

    0
    MeshNjihia•60
    @trackerMGNPosted almost 2 years ago

    @Mishywayu hello nice solution. my tip would be. remove the backslash from the style attribute. your code reads: background-image: url(./image-qr-code.png) have it as background-image: url("image-qr-code.png") since the image is in the same root directory

    1
    Michelle Wayua•150
    @MishywayuPosted almost 2 years ago

    @trackerMGN Hello, thank you for your solution. I tried the first solution by @SteveNoyes and it worked. Turns out I had to give the browser a little more time for the image to load. Thank you.

    1

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