Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Imagens não são exibidas no Angular cli versão 18

Referente ao curso Angular: componentização e design com Angular Material, no capítulo Iniciando a Jornada da Componentização e atividade Primeiro componente

por Denise Maria Leandro De Castro
| 147.7k xp | 14 posts
Desenvolvedora Android Junior

Bom dia! Já pesquisei em vários locais, inclusive aqui no fórum. Segui todas as orientações e ainda não deu certo... as imagens do projeto Jornada-milhas do curso de Angular não são exibidas... Já alterei o angular.json várias vezes e até agora, sem resultado. Segue código do angular.json e também do header.component.html:

angular.json (apenas trecho referente ao assets)

"tsConfig": "tsconfig.spec.json",
            "inlineStyleLanguage": "scss",
            "assets": [
              "src/assets",
              {
                "glob": "**/*",
                "input": "public"
              }
            ],
            "styles": [
              "@angular/material/prebuilt-themes/azure-blue.css",
              "src/styles.scss"
            ],

header.component.html:

<mat-toolbar>
  <img src="/public/assets/logomarca.png" alt="ponteiro de bússola">
  <span class="example-spacer"></span>
  <button mat-button>Vender milhas</button>
  <button mat-button>Sobre</button>
</mat-toolbar>

No aguardo. Muito obrigada desde já. :)

4 respostas
por Mike de Sousa
| 504k xp | 673 posts
Alura Scuba Team Suporte Educacional

Olá, Denise! Tudo bem com você?

Podemos tentar algumas abordagens para solucionar o problema. Tente os passos a seguir e me retorne com o resultado:

  1. Verifique o Caminho das Imagens: No seu header.component.html, você está usando <img src="/public/assets/logomarca.png" alt="ponteiro de bússola">. O caminho começa com /public/, mas, de acordo com o seu angular.json, os assets estão configurados para serem servidos a partir de src/assets e public. Tente modificar o caminho para <img src="assets/logomarca.png" alt="ponteiro de bússola"> ou <img src="public/logomarca.png" alt="ponteiro de bússola"> para ver se isso resolve o problema.

  2. Confirme a Estrutura de Pastas: Certifique-se de que a imagem logomarca.png está realmente na pasta correta. Se a imagem estiver em src/assets, o caminho no HTML deve ser assets/logomarca.png. Se estiver em public, o caminho deve ser public/logomarca.png.

  3. Verifique o Build do Projeto: Às vezes, o problema pode ser com o build do projeto. Tente parar o servidor de desenvolvimento e iniciar novamente. Isso pode ajudar a garantir que todas as mudanças sejam aplicadas corretamente.

  4. Faça o downgrade do Angular: A instrutora sugere nesse Preparando o ambiente a seguir as versões que ela utiliza durante as atividades. No caso, ela utiliza a versão 16 do Angular. Fazer esse downgrade pode solucionar o problema.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
por Denise Maria Leandro De Castro
| 147.7k xp | 14 posts
Desenvolvedora Android Junior

Ôpa Mike... então, eu tive que fazer o downgrade do Angular para a versão 16 e as imagens agora estão aparecendo, porém, não está renderizando corretamente...

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Como você pode ver, a imagem não está tomando toda a área... está ficando com esse espaço em branco bem grande.

Aqui o código SCSS:

:host { display: flex; margin: 0 auto; max-width: 1048px; width: 90%; }

Agradeço o apoio, estamos no caminho... precisa apenas renderizar corretamente. Pode me ajudar, por favor? Mutio obrigada.

por Mike de Sousa
| 504k xp | 673 posts
Alura Scuba Team Suporte Educacional

Olá, Denise.

Acredito que esse comportamento seja referente a largura do seu monitor, o código que enviou é idêntico ao da aula, mas eu consigo reproduzir a mesma situação ao aumentar a largura disponível para a imagem.

Você pode fazer uma pequena adaptação do SCSS do banner para que o tamanho da imagem se adapte a telas maiores:

figure {
  margin: 0;
  img {
    width: 100%;
  }
}

Com isso o tamanho da imagem fica ajustado.

demonstrando alteração no codigo scss para ajuste no tamanho da imagem do banner Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado
solução!
por Denise Maria Leandro De Castro
| 147.7k xp | 14 posts
Desenvolvedora Android Junior

Olá Mike, Muito obrigada, o problema foi resolvido.