QR Code Component with Lazy Loading Image

Solution retrospective
How to properly setup the img element to prevent the "content jump" problem when the qr-code is being shown on the page as I made the qr-code image lazily loaded.
What challenges did you encounter, and how did you overcome them?The challenge is to make the image lazily loaded and prevent "content jump" when it's being shown on the page.
To do this, I setup the html img attributes to the same dimensions as the image and on CSS, set the img width to be 100%
and the height to auto
.
<img src=" ./images/image-qr-code.png" alt="QR code" loading="lazy" width="576" height="576" />
What specific areas of your project would you like help with?img { width: 100%; height: auto; }
I've tried to apply the semantic HTML, but I don't know if my code is correct or not. If anyone has suggestions of how to improve it, please contact or message me.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @QuangHPV
I'm not very experienced, but for the semantic HTML, I think you can use elements like article, figure or footer for some part of this challenge. I think those are called landmarks, made so blind users can access parts of a webpage using a screen reader.
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