3
respostas

Imagem não aparece

<!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 style="text-align: center"> 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".</p></em></strong>

    <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>

Aparece apenas uma caixa no navegador com um x, utilizo o navegador microsoft edge já habilitei conteúdo para aparecer, mas mesmo assim não aparece a imagem.

3 respostas

Bom dia Lucas,

Você poderia informar o local onde está salvando tanto o arquivo .html como o local da imagem banner.jpg?

Mais uma coisa Lucas, o local que você informou que está a captura de tela que você tirou está com o endereço de armazenamento local da sua máquina, para que nós possamos vê-la, é necessário subir em um site de imagens, ou anexá-las aqui, eu só não sei se é possível a segunda opção pois eu nunca perguntei aqui no Fórum.

Pesquisei aqui e você poderia subir a imagem para dar mais detalhes por esse link: https://uploaddeimagens.com.br/

Mas lembre-se de tomar cuidado com informações sensíveis que você pode estar exibindo na internet.

Bom dia, Hiago.

Eu consegui solucionar o problema, a imagem não estava na mesma pasta do que o código por isso estava dando erro.

Hiago existe alguma forma de colocar imagens no meu código que estejam em outra pasta do desktop?

Opa Lucas, que bom que conseguiu resolver esse problema. :)

Há sim, é bem simples até, basta você informar o caminho relativo ao seu arquivo .html que você deseja exibir a imagem.

Exemplo:

Minha estrutura fictícia de diretórios Windows: C:\Users\Hiago\Documents\Alura\HTML5_e_CSS3\Site_de_exemplo_1\

Para ajudar na organização dos documentos, que também é uma boa prática na criação de sites, Dentro do diretório Site_de_exemplo_1 adicionaremos quatro outros diretórios , o paginas, css, js e o diretório img.

Um diretório para os arquivos** html, outra para os **arquivos de estilo do site, outro para os scripts Javascript e a outra que é para as imagens. Ficará mais ou menos assim:

C:\Users\Hiago\Documents\Alura\HTML5_e_CSS3\Site_de_exemplo_1\css

C:\Users\Hiago\Documents\Alura\HTML5_e_CSS3\Site_de_exemplo_1\js

C:\Users\Hiago\Documents\Alura\HTML5_e_CSS3\Site_de_exemplo_1\img

E aí, tanto para você fazer as referências aos seus scripts, como para imagens e estilos você vai usar a mesma sintaxe: (caminho relativo)

Para pegar no arquivo banner.jpg dentro da pasta img que criamos, basta fazer o seguinte, colocar:

<img src="../img/banner> .

O .. (ponto ponto) serve para informar que é para sair do diretório atual, ir um acima dele e entrar na pasta img.

Para pegar um arquivo de estilo, mantendo a sintaxe do caminho relativo, ficará assim:

<link rel="../css/style.css">

Bom, é isso aí Lucas, qualquer dúvida estou por aqui no que eu souber.

Forte abraço! o>

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