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

[Bug] Imagens não carregam

Boa tarde pessoal, tudo certo? Então eu estou tentando fazer o projeto do rodapé e tudo mais, porém há um problema, minhas imagens não carregam e eu não sei por que, olhei até o post do Levi, tentei importar as imagens como ele falou, baixei novamente as imagens, fiz pelo html pro autocomplete ir mostrando o caminho, colei no arquivo de React do rodapé, mas esse troço não encontra as imagens, eu vou mandar a print da arvore de pastas e o codigo do rodapé IArvore de pastas do projetoagora o código

import './Rodape.css'

const Rodape = () => {
   return (
      <footer className="footer">
   <section>
      <ul>
         <li>
            <a href="facebook.com" target="_blank">
               <img src="/fb.png" alt="logo do facebook" />
            </a>
         </li>
         <li>
            <a href="twitter.com" target="_blank">
               <img src="./imagens/tw.png" alt="logo do twitter" />
            </a>
         </li>
         <li>
            <a href="instagram.com" target="_blank">
               <img src="./imagens/ig.png" alt="logo do instagram" />
            </a>
         </li>
      </ul>
   </section>
   <section>
      <img src="./imagens/logo.png" alt="logo do Organo" />
   </section>
   <section>
      <p>Desenvolvido por Alura</p>
   </section>
</footer>
   )
}

export default Rodape

onde estou erando? será nos importes? será um bug no projeto?

3 respostas
solução!

Salve, Israel!

O problema aqui está no caminho relativo que você está indicando.

No caso do organo, / indica a pasta public. A sua pasta imagens precisa ficar DENTRO da pasta public. Pelo o seu print do VSCode, ela está no mesmo nível da pasta src. Então basta movê-la para a pasta public.

E, no src das imagens, você passa o caminho:

<img src="/imagens/logo.png" alt="logo do Organo" />

Repara que não existe um ponto antes, como você havia feito: ./, é mesmo direto / porque queremos indicar o caminho a partir da raiz.

Entendi professor, solucionou o problema, agora eu tenho umas duvidas.

  1. Por que ela tinha que estar na pasta public? isto é algo obrigatório do React?
  2. Qual a diferença entre "./" e "/" ou "../" ?
  3. Como eu sei quantos pontos eu preciso botar antes da barra ?

Vamos a elas. Preparado pra mergulhar mais fundo no universo do React?

  1. Por que ela tinha que estar na pasta public? isto é algo obrigatório do React?

Não é obrigatório, mas é uma das formas que a estrutura gerada quando utilizando o comando create-react-app. Existem outras formas de lidar com imagens e você consegue descobrir outras formas nesse curso aqui sobre manipular arquivos estáticos.

Também pode consultar a documentação, em inglês, do create-react-app se quiser ir ainda mais no detalhe.

  1. Qual a diferença entre "./" e "/" ou "../" ?

Nesse cenário, pensa que estamos trabalhando com um caminho de pastas relativos a onde estamos.

./ quer dizer: a partir daqui de onde estamos, navegue para...

/** aponta para a raiz do domínio. Durante o desenvolvimento, ela quer dizer: **http://localhost:3000/

../ quer dizer: a partir de onde estou, volte uma pasta. E você pode encadear e voltar mais de uma pasta, assim: ../../../componentes/Banner

  1. Como eu sei quantos pontos eu preciso botar antes da barra ?

Você precisa entender a localização do arquivo atual e a localização do arquivo no qual você está mirando. O que pode te ajudar a entender isso é observar o caminho que é informado quando utilizamos os imports dentro dos arquivos JavaScript!

Esse artigo da Camila aborda justamente esse assunto, super recomendo!