Entrar Ainda não tem acesso?
1
resposta

[Bug] Problemas com imagens do carrossel - HTML e CSS Responsividade Mobile First, no módulo 3, primeiro vídeo

Referente ao curso HTML e CSS: responsividade com mobile-first

por Luiz Fernando Ferreira Milagres
| 24.2k xp | 6 posts

Por favor, preciso de um suporte. Fiz todas as etapas do Swiper JS, mas as imagens do carrossel não carregam no navegador.

<div class="swiper">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide"> <img src="/img/Tuning.png" alt="Livro sobre apache kafka e spring boot da alura  books"></div>
      <div class="swiper-slide"> <img src="/img/liderança.svg" alt="Livro sobre liderança em design da alura books"> </div>
      <div class="swiper-slide"> <img src="/img/javascript.svg" alt="Livro sobre javascript assertivo da alura books"> </div>
      <div class="swiper-slide"> <img src="img/guia-frontend.svg" alt="Livre guia font-end"></div>
      <div class="swiper-slide"> <img src="img/Portugol.svg" alt="Livro sobre portugol"> </div>
      <div class="swiper-slide"> <img src="img/acessibilidade.svg" alt="Livro sobre acessibilidade"> </div>
    </div>
1 resposta
por Lorena Garcia
| 8258.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Olá Luiz, tudo bem?

Uma possível solução seria verificar se os caminhos das imagens estão corretos. No código que você postou, percebi que algumas imagens possuem uma barra "/" antes do caminho, enquanto outras não possuem. Certifique-se de que todos os caminhos estejam escritos da mesma forma e que o caminho da pasta esteja correto.

Outra possível solução seria verificar se as imagens estão no formato correto (JPEG, PNG, etc.). A sua primeira está no formato PNG e as outras em SVG.

Se não conseguir, por favor, mostre como está a organização do seu projeto. Por exemplo, um print que como está essa parte (o explorer) no seu editor de código:

imagem do vscode focando na pasta explorer onde estão os arquivos do curso começando com a pasta assets e dentro dela está a pasta css e img e na raiz do projeto fora de pastas está o index.html

Veja que a pasta img está dentro de uma pasta chamada assets. Então o caminho para colocar as imagens seria:

<div class="swiper-slide">
    <img src="assets/img/Javascript.svg" alt="Livro sobre javascript assertivo da alura books">
 </div>

Espero ter ajudado.

Um abraço e bons estudos.