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

QR page with html and css

@des254

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


I placed an image to my html document but I can't see it in my live URL

Community feedback

@OneAlpacaMore

Posted

Hi Desmond!

I saw your GitHub repo for this project and the QR image is not working because of the path you gave it.

With this code, you are telling the machine to look for an images folder and then search for the "image-qr-code.png", but since such a folder does not exist (at least in the repo), it returns the content of the "alt" tag.

<div class="image">
  <img src="./images/image-qr-code.png"  class="qr" alt="Frontend Mentor qr code">
</div>

Try to update the "src" attribute with the correct path. It should be something like this:

<div class="image">
  <img src="./image-qr-code.png"  class="qr" alt="Frontend Mentor qr code">
</div>

I recommend you to read this little article, I had the same problems when I started and this help me a lot: Understanding HTML File Paths & How to Use Them

Optionally as IdotEXE-313 says, you can create a folder called images and then move the QRcode image inside that folder in your repo. That way you can solve the problem too and there's no need for updating any code. Is up to you :)

Marked as helpful

1

@des254

Posted

@OneAlpacaMore Thanks so much I have done an edit and my image is back. Am grateful for the resource material. Let me go through it.

0

@IdotEXE-313

Posted

The reason the image won't display is because you've referenced a directory which doesn't exist (that is, the images folder).

To fix this, you can either create an images folder and then place the image within that folder, or you can directly reference the image as src='image-qr-code.png'.

Marked as helpful

1

@des254

Posted

@IdotEXE-313 Thanks for that let me try.

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