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

A imagem não carrega

Estou no módulo quatro do HTML / CSS, e neste momento o professor pede para carregar uma imagem abaixo do "h2" SOBRE A BARBEARIA ALURA. Fiz o download da imagem, segui os passos para alterar o HTML, conforme o código anexo, mas somente esta imagem não carrega. Se eu , por exemplo, carrego a imagem CABELO.JGP (imagem também pertencente ao projeto), esta aparece. A imagem a ser carregada e apresentada está denominada como UTENSILIOS.JPG, conforme orientação do professor.

<!DOCTYPE html>

<html lang="pt-br">

<!– e finaliza-se com –> 

    <head>

        <meta charset=”UTF8”>

        <title>Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">

    </head>

    <body>

        <header>

            <div class="caixa">

                <h1><img src="logo.png"></h1>

                <nav>

                    <ul>
                        <li><a href="Barbearia_Alura1.html"><font face="Arial">Home</font></a></li>
                        <li><a href="Produtos.html"><font face="Arial">Produtos</font></a></li>
                        <li><a href="Contato.html"><font face="Arial">Contato</font></a></li>

                    </ul>

                </nav>

            </div>

        </header>

        <!--No universo HTML e CSS, ao falarmos de estilo, usamos uma classe, quando falamos de comportamento, usamos o identificador. A força da classe não é tão grande, então ela pode ser sobrescrita e seu estilo alterado, por isso é importante em CSS sempre utilizarmos classes, assim criamos um padrão em nosso código, o que é fundamental.-->

        <img class="banner" src="banner.jpg" alt="Loja Barbearia Alura">

        <main>

            <section class="principal">

                <h2 class="titulo-principal"><font face="Arial">Sobre a Barbearia Alura</font></h2>

                <img class="utensilios" src="utensilios.jpg" alt="Utensilios de um Barbeiro.">

                <p><font face="Arial">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.</font></p>

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

                <p><font face="Arial">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.</font></p>

            </section>

            <section class="beneficios">

                <h2 class="titulo-principal"><font face="Arial">Benefícios</font></h2>

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

                <img class="imagembeneficios" src="beneficios.jpg">

            </section>

        </main>

        <footer>

            <img src="logo-branco.png">
            <p class="copyright"><font face="Arial">&copy; Copyright Barbearia Alura - 2019</font></p>

        </footer>

    </body>

</html>
2 respostas

Boa tarde, Caso eu diga algo nada a ver me perdoe, mas, você descompactou o utensilios.zip?!

Após descompactado é que o utensilios.jpg pode ser utilizado no seu projeto.

solução!

Fala Marcos!

Para garantir que a imagem seja carregada, certifique-se que ela está na mesma pasta do arquivo HMTL. Para você chamar uma imagem somente pelo nome do arquivo, ela deve estar localizada na mesma pasta que o HTML. Caso contrário, você terá que especificar o caminho, utilizando barras para destacar as pastas, desta maneira:

<img src="/imagens/logo-branco.png">

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