Design comparison
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
- @savvystriderPosted over 1 year ago
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 helpful1 - @Falco-BoehnkePosted over 1 year ago
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:
-
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. -
Add a
.
in front, that makes it look in the folder you are in right now (project folder) and goes into images -
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 -
Please log in to post a comment
Log in with GitHubJoin 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