QR Code Component Using Only HTML and CSS

Community feedback

• 

  Rodrigo•480

  @RodrigoHLCPosted about 1 year ago

  Like fkrunic mentioned, the problem is in the image path. When you were working on your computer, the path to the image file you used included going into the folder called "images". However, you did not upload the images folder to your repository, so the src attribute links to a folder that isn't there. You need to either:

  1. change src="/images..." to the top level src="./... , like fkrunic said, or
  2. create a folder called "images" on your repository and put the image files there, so that the path links to an existing location with your repository

  PS: to my knowledge, you can't simply create a folder in github: you need to click on "New file" (or "Add file", don't remember exactly right now. Something like that), then when you have the option of typing the name of a file, press / which will create a new folder. Create a new, random file within this folder, and then rename the folder (if my explanation isn't clear, you can look up tutorials on YouTube, which is what I did, as I was going nuts trying to find a "Create folder" button).

  Marked as helpful

  0

  ---

  

  AyomiposiSoladoye•20

  @AyomiposiSoladoyePosted about 1 year ago

  Thank you so much. This was really helpful! @RodrigoHLC

  1

  

  Rodrigo•480

  @RodrigoHLCPosted about 1 year ago

  Glad to hear that. Also, if you found my reply useful, please consider hitting the "Mark as helpful" button. It helps me increase my score on the site. @AyomiposiSoladoye

  My god, I sound like a YouTuber 😂😂

  0
• 

  fkrunic•310

  @fkrunicPosted about 1 year ago

  On Line 19 of index.html where the image is loaded, the path set is images/image-qr-code.png:

  <img id="img-qr" src="images/image-qr-code.png">
  

  However, looking at the directory structure of the project repository, it looks like image-qr-code.png is at the top level. Try changing it to:

  <img id="img-qr" src="./image-qr-code.png">
  

  as there doesn't appear to be an images directory. Hope this helps!

  Marked as helpful

  0

  ---

  

  AyomiposiSoladoye•20

  @AyomiposiSoladoyePosted about 1 year ago

  Thank you so much. This was really helpful! @fkrunic

  0
• 

  Larry•170

  @lawrence-yoonPosted about 1 year ago

  Nice project! You should also add an alt attribute to describe what the image is. That way in situations like this, if the image is not working correctly, it could at least tell users what it should be.

  <img id="" src="" alt="frontendmentor-qr-code"></img>
  

  0

  ---

  

  AyomiposiSoladoye•20

  @AyomiposiSoladoyePosted about 1 year ago

  Thank you! @lawrence-yoon

  0