Jump to content

Por que minha imagem não carrega no HTML, mesmo com o caminho correto?

Manoel

Por Manoel
em HTML & CSS

 Compartilhar

Postagens Recomendadas

Manoel

Manoel

Postado
Postado

A minha questão é bem simples. Vi no fórum que outras pessoas também colocaram essa dúvida. Fiquei acompanhando, coloquei em prática todas as sugestões, mas nenhuma funcionou.  Mando em anexo os documentos que elaborei. A imagem está numa pasta dentro da pasta index, e acredito que esteja correto, mas nada dela carregar. 

<!DOCTYPE html>

<html lang="pt-br">
      <head>
            <meta charset="utf-8">
            <title>Sorvete de três Camadas</title>
	    <link rel="stylesheet" href="meuestilo.css">							
        </head>
        <body>
             <div class="conteudo">
                 <h1>SORVETE DE TRÊS CAMADAS</h1>
                 <img src="img/sorvete.png">
                 <img align= "right">
                 <h2>Primeira Camada</h2>
                 <ul>
                         <li>1 lata de leite condensado</li>
                         <li>1 lata de leite de vaca</li>
                         <li>3 gemas</li>
                 </ul>
                 <p>Juntar tudo e colocar no fogo até ferver. 
             Despeje, em seguida, em uma travessa de vidro.</p>
                 <h3>Segunda Camada</h3>
                 <ul>
                         <li>1 lata de leite de vaca</li>
                         <li>3 colheres de chocolate em pó</li>
			 <li>1 colher de maisena</li>
			 <li>3 colheres de açucar demerara</li>					
                 </ul>
                 <p>Ferva todos os ingredientes e depois despeje
             em cima da primeira camada.</p>
                 <h4>Terceira Camada</h4>
                 <ul>
                         <li>1 lata de creme de leite</li>
                         <li>3 claras em neve</li>
                         <li>2 colheres de açucar demerara</li>
                  </ul>
                  <p>Faça um chantily, cubra a bandeja e a leve
             ao congelador.</p>             
             </div>
        </body>
</html>
body {
      background: #87CEFA;
      color: #ADD8E6;
	  font-size: 17px !important;
}
.conteudo {
      width: 50%;
      margin: 10px;
      margin-left: 18%;
      margin-right: 18%;
      background: #4682B4;
      padding: 7%;
      border-radius: 50px;
      box-shadow: -7px 7px 7px #292929;    
 }         
.conteudo img {
      width: 40%;
      max-width: 50px;
      max-height: 30px;
      width: auto;
      height: auto;
      margin-left: 100%;
      margin-right: -10%;
}
h1 {
	  font-family: Avenir, sans-serif;
	  color: #DAA520;
          text-decoration: underline;
          text-decoration-style: double;
          text-transform: uppercase;
}
h2, h3, h4 {
      font-family: Avenir, sans-serif;
      color: #DAA520;
      text-transform: unset;
}
h1, h2, h3, h4 { text-align: center; 
}

index.txt meuestilo.css index.html

  • Curtir 1
  • Casa do Desenvolvedor mudou o título para Por que minha imagem não carrega no HTML, mesmo com o caminho correto?
iUnlock Reseller Leo Suporte

iUnlock Reseller Leo Suporte

Postado
Postado

Meu amigo como você quer que apareça alguma imagem sendo você tem que ter esta imagem "sorvete.png" dentro da pasta img, caso tenha sua imagem pode esta quebrada ou seja corrompida. Tente baixa novamente ou outra. Peguei seu código  e testei com outra imagem e veja nos anexos. Teste o codigo com outra imagens pois a sua que baixou pode estar corrompida. Corrigi as tags  para definir títulos ou cabeçalhos em um documento substituindo h2,h3,h4 por h1 pois fica em tamanhos iguais e padrões .  Por exemplo existem seis níveis de títulos, representados pelas tags "h1" a "h6", cada uma com um tamanho e importância decrescente.

- h1: Título principal

- h2: Subtítulo

- h3: Subtítulo secundário

- h4: Título de seção

- h5: Subtítulo de seção

- h6: Título de subseção

Exemplo:

h1>Título principal/h1

h2>Subtítulo/h2

h3>Subtítulo secundário/h3

h4>Título de seção/h4

h5>Subtítulo de seção/h5

h6>Título de subseção/h6

images (78).jpeg

Screenshot_20241109_212800_Spck Editor.jpg

index.html meuestilo.css

  • Curtir 1
  • Ajudou! 1
frankhosaka

frankhosaka

Postado
Postado (editado)

Hoje testei o código, e percebi que o marcador <h5> não centraliza o texto: 

<!DOCTYPE html>
<meta charset="utf-8">
<title>Sorvete de três camadas</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" 
    rel="stylesheet">							
<body class="container bg-info mt-3">
<div class="bg-primary w-50 m-auto rounded">
<div class="p-3">
    <h3 class="text-warning">Sorvete de Três Camadas</h3>
    <div class="w-25 m-0 m-auto"><img src="sorvete.png" width="100" height="60"></div>
    <h5 class="text-warning">Primeira Camada</h5>
    <table class="table"> 
        <td class="bg-primary border text-center">1 lata de leite condensado
        <td class="bg-primary border text-center">1 lata de leite de vaca
        <td class="bg-primary border text-center">3 gemas
    </table>            
    <pre>    Juntar tudo e colocar no fogo até ferver. 
    Despeje, em seguida, em uma travessa de vidro.</pre>

    <h5 class="h5 text-warning">Segunda Camada</h5>
    <table class="table">
        <tr>
        <td class="bg-primary border text-center">3 colheres de chocolate em pó
        <td class="bg-primary border text-center">1 lata de leite de vaca
        <tr>
        <td class="bg-primary border text-center">1 colher de maisena
        <td class="bg-primary border text-center">3 colheres de açucar demerara
    </table>
    <pre>   Ferva todos os ingredientes e depois despeje 
   em cima da primeira camada.</pre>            
                 
    <h5 class="text-warning">Terceira Camada</h5>
    <table class="table"> 
        <td class="bg-primary border text-center">1 lata de creme de leite
        <td class="bg-primary border text-center">3 claras em neve
        <td class="bg-primary border text-center">2 colheres de açucar demerara
    </table>
    <pre>   Faça um chantily, cubra a bandeja e a leve
   ao congelador.</pre>                     
</div>
</div>
</body>

 

Captura de tela 2024-11-10 102742.png

sorvete.png

index.html

Editado por frankhosaka
  • Curtir 1

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...