Solucionado (ver solução)

Importante

Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!

Solucionado
(ver solução)
11
respostas

Mais um problema com imagem

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

    <head>

        <meta charset="UTF-8">

        <title> Barbearia Alura </title>

        <style>
            body {
                background: #CCCCCC
            }

            h1 {
                text-align: center
            }

            p {
                text-align: center
            }

            #missao {
                font-size: 20px
            }

            em strong {
                color: red;
            }

        </style>

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

Boa tarde! Estou tendo uns problemas pra mostrar a imagem e já li diversas soluções que não funcionaram pra mim dentre elas:

  • Colocar a imagem dentro do mesmo diretório que o .html
  • Olhar o console quando abro a página (não mostra nenhum erro).
  • Verificar erro de digitação.

Desculpe não utilizar o formato .css, achei mais fácil de entender colocando tudo dentro da tag style pra pegar a lógica.

Fiz um diretório na área de trabalho, tentei colocar toda extensão do arquivo (Começando em C:/User ... arquivo) e também não funcionou.

11 respostas

Fala ai Yago, tudo bem? Recomendo você trabalhar com caminhos relativos, ou seja:

<img src="./banner.jpg"> // caso esteja na mesma pasta
<img src="./assets/img/banner.jpg"> // caso esteja na dentro de assets/img

Espero ter ajudado.

Olá Matheus, como vai? Obrigado por responder, mas acho que ainda não funcionou.

Acho que não entendi direito a parte do caminho relativo, eu vou colocar aqui exatamente como está o caminho que tentei. Veja se tem algo errado:

<img src="C:\Users\cliente\Desktop\Barbearia\banner.jpg">

As suas

As suas "Barras" estão pro lado errado ALTGR + Q Colocas barras certas "/", não sei se isso afeta o código, mas eu sempre colequei assim. Além do mais, não precisa colocar o diretorio da raiz, apenas coloque onde a imagem se encontra, já que o INDEX.HTML fica na mesma pasta. <img src="/Barbearia/banner.jpg">` (Respeite as letras maisculas e minusculas).

Ola Dante, como vai? Então, eu estava usando a barra padrão (/) e quando fui copiar o diretório pra colar aqui, vi que a barra tava no sentido inverso, tentei alterar no meu código pra ver conseguia fazer a imagem aparecer e nada, nem com a contra-barra () nem a barra (/).

Alterei as barras, verifiquei a digitação, ainda não funciona.

Oi Yago,

Verifica se você salvou o arquivo com o nome "banner" ou "banner.jpg". Eu salvei como "banner.jpg" e estava dando erro.

Ou seja, Salva dentro da pasta do index o arquivo como "banner" e no código chame a imagem como "banner.jpg".

Boa tarde,

a minha imagem também não carrega, será que é o navegador? Estou usando o Firefox.

Então Yago, você não precisa colocar o diretorio desde a raiz do sistema, coloca o site na mesma pasta que as imagens, assim não vai precisar colocar o diretorio tão longo, no fim deve ficar parecido com isso <img src="/banner.jpg">, se isso não funcionar, entra em contato comigo pelo meu Linkedin ou meu email blog.anutrof@gmail.com.

Boa tarde a todos!

Vamos as respostas de acordo com ordem de chegada:

Kevin, obrigado por tentar ajudar e pela dica, suspeitei de mim mesmo no seu comentário e fui verificar se tinha colocado a extenção duas vezes kkk felizmente não coloquei e infelizmente minha imagem ainda não funcionou.

Dante, muitíssimo obrigado por tanta disponibilidade pra tentar ajudar, eu salvei tudo em uma pasta na minha área de trabalho e coloquei o site e a imagem nesta pasta, salvei no diretório o caminho da pasta e ainda não consigo visualizar a imagem. Entrarei em contato por e-mail pois o link para o Linkedin está corrompido ou algo do tipo.

Muito obrigado a todos pela tentativa de ajuda e Mayco, volto para fechar a discussão com uma solução se a encontrar com o Dante por e-mail.

solução!

Olá Yago! Nossa, esse problema foi tenso, eu costumo usar o VISUAL STUDIO CODE, que geralmente faz esse serviço de adicionar imagem para nós, mas o problema é que ele consegue localizar as imagens apenas enquanto abrimos os arquivos por ele. Voltando a história, solucionei o problema, segue os passos abaixo que é sucesso!

  1. PRIMEIRO PASSO: Então ficaria c:/SEUDIRETORIO/SEU DIRETORIO/DESKTOP/PASTADOARQUIVO/NOMEDOARQUIVO Note que NÃO deve copiar esse diretorio, pois as "barras", são invertidas e você precisa práticar. PRIMEIRO PASSO

  2. SEGUNDO PASSO Então no arquivo HTML você tem que editar o SRC, de acordo com o caminho da pasta, fazendo isso você deve conseguir visualizar a imagem dentro do site, NÃO ESQUECE DE COLOCAR O NOME DO ARQUIVO DEPOIS DO DIRETORIO. SEGUNDO PASSO OBS: se você modificar a pasta de lugar, também deverá especificar esse novo local, ou seja, mudar o caminho dela dentro do HTML.

Boa noite a todos!

É com grande alegria que posso dizer que o meu problema foi solucionado, como prometido venho aqui deixar a solução graças ao Dante (menção honrosa).

Primeiramente eu tinha tentado da forma como explicada na aula mas não funcionou, quando fui tentar outro método e copiar todo diretório do arquivo eu fui nas propriedades da imagem (banner.jpg) e copiei tudo que por padrão veio com a contra-barra ao invés da barra normal.

Aparentemente, tudo que precisava fazer era trocar as contra-barras pela barra normal e funcionou, porém especificando todo diretório desde a raiz.

O código final ficou:

<img src="C:/Users/cliente/Desktop/barbearia/banner.jpg" alt="Não funcionou">

Esse "alt" é coisa do Dante, eu acredito que deva ser um condicional caso a imagem de algum erro.

É isso, espero que a minha dúvida também consiga sanar a dúvida de muitos outros.

Grande abraço e mais uma vez obrigado a todos que interagiram ou sugeriram algum tipo de solução.