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 Code Component

@MadamSauce

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 had trouble with the image appearing once I deployed it to my GitHub page. Wondering if anyone has any tips to fix this issue. Please see the link below:

https://madamsauce.github.io/qr-code-component-main/

Community feedback

@savvystrider

Posted

To get your image to appear, add a period to the start of your src attribute:

<img src="./images/qr-code-148732__480.webp" alt="QR Code">

Marked as helpful

1

@Falco-Boehnke

Posted

The image location is, I assume, in your project and inside the 'images' folder. The full path to the image would then be: https://madamsauce.github.io/qr-code-component-main/images/qr-code-148732__480.webp

If you try that path you find the image, so the issue must be with your src value

You are using the image link like this src="/images/xyz.jpg"

A slash in front means the path is from root, which means it looks for the image at: https://madamsauce.github.io/images/xyz.jpg

You can fix this in three ways:

  1. Remove the slash in front of images. This means the file will be searched in the folder images, that should be located in the current folder, which would be the project folder.

  2. Add a . in front, that makes it look in the folder you are in right now (project folder) and goes into images

  3. Add the absolute url instead: https://madamsauce.github.io/qr-code-component-main/images/qr-code-148732__480.webp

Personally I have seen Option 1 most of the time for images located in your project

0

@Ignacio017

Posted

i think you dont put the folder of the image

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