Image does not appear in the HTML project

Asked

Viewed 58 times

-5

Hello!

I’m starting to learn HTML and, in a personal project, I can’t put a photo. I’m using <img src="html e css/img/teste.jpg">

I’ll put a piece of the code here:

<body>
  <header>
    <h1>Eu, Thaís Ketlen</h1>
  </header>
  <section>
    <header>
      <h2>Posts</h2>
    </header>
    <article>
      <header>
        <h3>Post #1</h3>
      </header>
      <p> Olá! Meu nome é Thaís e eu tenho 22 anos! Na foto, você pode ver como eu sou:</p>

      <img src="html e css/img/teste.jpg">

html

4 answers

0

You cannot have spaces in the path to the file. Try replacing the spaces by %20:

<body>
  <header>
    <h1>Eu, Thaís Ketlen</h1>
  </header>
  <section>
    <header>
      <h2>Posts</h2>
    </header>
    <article>
      <header>
        <h3>Post #1</h3>
      </header>
      <p> Olá! Meu nome é Thaís e eu tenho 22 anos! Na foto, você pode ver como eu sou:</p>

      <img src="html%20e%20css/img/teste.jpg">

Note that this overwrite should be done only in the HTML file, and not in the folder name itself.

-1

Code editors do not recognize a file path with space in the file name or some folder, I recommend using the format snake_case (separation_das_palavras_por_underline) or Camelcase (Starting all words with uppercase but no space ) in folders you use for projects, this makes it easy to understand the file you are putting and avoid errors in the code, besides being a standard used in programming, here are two examples of path you can use:

<body>
  <header>
    <h1>Eu, Thaís Ketlen</h1>
  </header>
  <section>
    <header>
      <h2>Posts</h2>
    </header>
    <article>
      <header>
        <h3>Post #1</h3>
      </header>
      <p> Olá! Meu nome é Thaís e eu tenho 22 anos! Na foto, você pode ver como eu sou:</p>

      <img src="html_e_css/img/teste.jpg"> (snake_case)
                     ou 
      <img src="htmlECss/img/teste.jpg"> (CamelCase)

-3

Try <>img src="html-e-css/img/test.jpg"<> and rename the folder name with the dash "-" instead of the space "Spacebar".

-4


Hello Thais all right? I hope so

By your code I noticed that this image is located on your computer right?

If this is the case, place your html code and images in the same folder. That way when you use the reference image, you will only need to use the "name_da_photo.jpg".

When this is not the case, try to avoid using spaces. Use _ or join all.

I hope I’ve helped.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.