Can not load an img tag - HTML

Hi everyone,
A bit embarrased to post this, as I can not make an image show in a crazy-basic html structure as shown in the formatted text underneath this paragraph. Although I have seen/read many people stucked with this topic, man, I am not able to find the way to keep going.
And I am sure you do.

<!DOCTYPE html>
  <meta name="viewport" content="width=device-width,initial-scale=1" >
  <link href="style.css" rel="stylesheet">
  <img src="users/petrus/Documents/cajon/20200219_144042copy.jpg" title=""/>
  <h2>This is Petrus.</h2>
  <p>TLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  <a href='https://' target='blank'>Some work of mine</a>
  <script src="script.js"></script>

I will try my best to help you, I completed the HTML Course a while ago so I might be rusty but I think you might be forgetting the “alt =” in your code.

This is what I can find online about your code:

An “img” element must have an “alt” attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.

From line 9, column 3 to line 9, column 76 ( Basically where it says "<img )

<img src=“users/petrus/Documents/cajon/20200219_144042copy.jpg” title=“”/ <h

As well as:

Bad value “https://” for attribute “href” on element “a”: Invalid host: empty host.

From line 12, column 3 to line 12, column 36 ( Basically where it says "<a )

To fix this I believe you should first make an alt for the image.

As well as the href problem you should probably just get add a link to where you want the image to link to. You can add a comment explaining why its a different alternative link if you do not have that link/page ready

1 Like

While it is considered best practice to include an ‘alt’ attribute, it is not required to render an image. Most likely your image path is bad. Does the rest of the page load? If so, then test to see if the link is the problem by using a direct link from the web such as this Google Doodle

1 Like

That might be an issue as well, I remember I would attempt to paste in images from the web or my computer and they never loaded until I learned why. :slightly_smiling_face:

1 Like

What I do is to open the image on a web browser - copy its root - paste it in my code.
No joy at all.
Could it be because I am trying to load an image from my laptop - to codeacademy worspsce, so the root its failing?
Thank you all for answering

ok, so if the easiest solution would be to include the picture in the same directory Im working with, my new question is:
is there a way to include the picture I want to use in codeacademy workspace? Changin the code into

<img src="20200219_144042copy.jpg" title="" alt="">

I am not sure if all workspaces allow you to upload files. If it is a personal workspace, then yes.

1 Like

I believe is what you just mentioned @1moregame but not so sure if its just me not addressing it properly, unaware of rooting it the right way.
It works locally, but not on CodeA workspace.
Looking to confirm if its just a workspace thing (?).
Thank you

Yes, most likely a workspace thing. If you are to run the same code through a localhost via VS Code, you can use local images. You cannot use local resources directly in a workspace, but you can upload them if the workspace allows you to add files and then use them with a relative link.

1 Like

so we can confirm local resources can not be used in CodeA workspace (they can not be uploaded).
thank you @1moregame!

1 Like