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

IMAGEM NÃO APARECE

eu organizei as imagens em uma pasta e as paginas em outra, mas mesmo eu colocando o caminho certo a imagem não parece, no caso nenhuma imagem.

produtos.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Produtos - Barbearia Alura</title>
        <link rel="stylesheet" href="produtos.css">
    </head>
    <body>
        <header>
            <h1><img src="/imagens/logo.png"></h1>
            <ul> 
                <li><a href="index.html">Home</a></li>
                <li><a href="produtos.html">Produtos</a></li>
                <li><a href="contatos.html">Contato</a></li>
            </ul>  
        </header>
    </body>
</html>

index.html

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title style="text-align:center">Barbearia Alura</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1 class="titulo-principal">Barbearia Alura</h1>
        </header>
        <img id="img-banner" src="/imagens/banner.jpg">

        <div class="principal">

            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
            <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>
        </div>

        <div class="beneficios">
            <h3 class="titulo-centralizado">Benefícios</h3>

            <ul>
            <li class="itens">Atendimento aos Clientes</li>
            <li class="itens">Espaço Diferenciado</li>
            <li class="itens">Localização</li>
            <li class="itens">Profissionais Qualificados</li>
            </ul>

            <img id="img-beneficios" src="/imagens/beneficios.jpg" class="img-beneficios">
        </div>
    </body>
</html>

C:\projetos\alura\HTMLCSS\paginas (pasta das paginas) C:\projetos\alura\HTMLCSS\imagens (pasta das imagens)

3 respostas

Olá, Larissa!

Aqui temos um problema de caminho relativo e absoluto. Como você está abrindo o arquivo diretamente do disco, creio que o src teria de ser mais ou menos assim:

            <img id="img-beneficios" src="../imagens/beneficios.jpg" class="img-beneficios">

O .. volta uma pasta a partir de onde você está, e então segue normalmente.

Consegue testar?

solução!

Olá, Larissa!

Aqui temos um problema de caminho relativo e absoluto. Como você está abrindo o arquivo diretamente do disco, creio que o src teria de ser mais ou menos assim:

            <img id="img-beneficios" src="../imagens/beneficios.jpg" class="img-beneficios">

O .. volta uma pasta a partir de onde você está, e então segue normalmente.

Consegue testar?

Deu certo! Obrigada.