Not sure what's wrong in the code

I am a beginner. I am trying to use VScode to display image on my first web page by using the code as below. Seems doesn’t work. Not sure what is wrong. Could somebody help?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>>
  <body>
    <img src="images/bulldog.jpg" alt="My test image">
  </body>
</html>

Hi and welcome.
The information you gave us is a bit, incomplete/
Also if you are using VCS make sure the image is in the same file as the rest of your code

Hello.
I can’t tell from what you posted wha tis wrong with your code.
If you are a beginner I would suggest starting with the FCC curriculum here:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/
The code editor is built into the web page and works really well.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like

I am following the coding showed in this website in File Path section

Thank you very much about backtick. Helpful

So you have an images folder inside the root folder where your HTML file is, correct?

/root-folder
  index.html
  style.css
  /images
    bulldog.jpg

When you start to type images/ for the src on the img element, does VS Code give you an auto-complete option with a list of images inside the folder? If your paths are correct it should do that.

Next, I’d suggest using the Live Server extension to serve the page.

1 Like

The folder set up is correct, it is exact way as you described. Still doesn’t work.

Hello,
I’ve noticed two errors in your code. Read two comments I added below.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>> <!-- remove this additional > character -->
  <body>
    <img src="images/bulldog.jpg" alt="My test image"> <!-- add / before > to properly close image tag -->
  </body>
</html>

@Zubru22 I don’t believe any of that should cause any issues with loading the image. But I would suggest fixing the extra > just to have valid HTML.

The closing slash on the img is not needed and in fact, gets ignored. In HTML 5 it is valid to close a void element but it “has no effect on void elements”.

12.1.2.1 Start tags

  1. Then, if the element is one of the void elements, or if the element is a foreign element, then there may be a single U+002F SOLIDUS character (/). This character has no effect on void elements, but on foreign elements it marks the start tag as self-closing.

@LauraXiaoLiu it is hard to troubleshoot local problems like this remotely.

Can you post an image of the network tab in Chrome when you try to load the page (Control+Shift+J > click the Network tab > reload the page > click the image in the Name column).

Is the issue not this:

<img src="/images/bulldog.jpg" alt="My test image"> <!-- I added a / before images -->

With the OPs file/folder structure there shouldn’t be a need for using a root relative path. Although using one isn’t going to break anything either.