Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

imagem quebrada

Gente, estou com problema com a imagem, ela parece estar quebrada, e não carrega, fica somente o icone de imagem cortada. ela está na mesma pasta do meu index.html, e não sei mais o que fazer, segue o print de como está.

https://uploaddeimagens.com.br/imagens/DE9SI7U (como está a imagem no navegador

https://uploaddeimagens.com.br/imagens/30QeaV8( e a imagem que mostra que os arquivos estão na mesma pasta )

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title> Barbearia Alura </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

     <img src="banner.jpg">

    <h1>Sobre a Barbearia Alura</h1>

    <p>Localizada no coração da cidade a <strong>Barbearia Alura </strong>traz para o mercado o que há de melhor para o
        seu
        cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada
        dia.
    </p>

    <p id="missao" >
        <em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em>
    </p>

    <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de
        excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
</body>

</html>
8 respostas
solução!

Oi, Vinicius, tudo bem?

Dentro da tag , especificamente em "src" coloque uma "/" e vá navegando entre as pastas até encontrar a imagem do banner.

No meu funcionou dessa forma.

Exemplo:

<img src="/Primeiro_web/produtos/logo.png">

Oi Vinicius,

Simulei o seu código localmente e funcionou corretamente para mim.

Utilizei uma imagem de exemplo e depois tentei causar o problema, deletei a imagem para ocorrer o mesmo problema.

Uma dica para você tentar entender o que acontece é abrir o console do seu navegador, clicando com o direito e indo em inspecionar e ir para a aba console.

Caso seu html não esteja encontrando o arquivo ele vai te apresentar uma mensagem de erro semelhante a minha abaixo:

GET file:///C:/Users/User/Desktop/Testes/banner.jpg net::ERR_FILE_NOT_FOUND

Assim você consegue conferir qual o caminho completo que seu html está procurando pela imagem e talvez possa te nortear no que esta ocorrendo.

muito obrigado meu mano

Conseguiu desobrir o que estava acontecendo e resolver?

eu fiz tudo o que vc pediu, nas não deu certo, eu fui lá em inspecionar não aparecia mais o erro mas também a imagem não aparecia, então eu exclui os arquivos e a pasta, e criei outra pasta em outro lugar e recomecei e quando cheguei na hora de colocar a imagem deu certo!

Estava passando pelo mesmo problema, e também apaguei tudo e re-salvei e dai magicamente funcionou!

Alguém sabe explicar o porque?

Certo Vinicius, que bom que funcionou.

Oi Antonio,

Sem a possibilidade de analisar diretamente no ambiente de vocês é difícil dizer com precisão.

No entanto, meu palpite é de que o arquivo estava com alguma permissão de acesso do seu sistema que estava limitando o navegador de carregá-lo.

Quando vocês copiaram para outro local os arquivos foram criados com uma permissão que não causou este problema.

Acredito que para resolver esse problema com as imagens, no início, quando ainda temos pouco conhecimento e prática com o HTML e CSS, devemos deixar as imagens sempre na mesma pasta onde está salvo os outros dois arquivos: .html e o .css. E com o tempo, vamos melhorando nossos conhecimentos e melhorando a hierarquia das pastas usadas. Não sei se é isso, mas por tudo que já vi até o momento, analisei dessa forma!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software