Solucionado (ver solução)
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.

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