2
respostas

Imagens não renderizou

As imagens não renderizam na minha máquina.

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

2 respostas

Oi Michele, tudo bem?

Verifica se seguiu os seguintes passos:

  1. Modificou o estilo global no arquivo "styles.css" copiando e colando o código disponível na transcrição.
  2. Modificou o arquivo "app.component.css" colando o código abaixo no arquivo para a criação do background:
main {
  background: url(/assets/imagens/background-completo.png);
  background-size: cover;
  min-height: 60vh;
}
  1. Colocou a pasta com todas as imagens da aplicação dentro da pasta "assets" do Visual Studio Code sem modificar os nomes das imagens.

  2. Criou o primeiro componente do projeto, o cabeçalho, dentro do diretório "app", criando, dentro dele, uma nova pasta chamada "componentes".

  3. No terminal do Visual Studio Code, digitou o comando "ng generate component componentes/cabecalho" para gerar o componente do cabeçalho.

  4. No arquivo CSS recém-criado, colou o trecho de código do arquivo "cabecalho.component.css".

  5. Criou o HTML do cabeçalho no arquivo HTML recém-criado, botando a tag header, com a classe "cabecalho" e o atributo "ff-inter".

  6. Dentro da tag header, verifica se adicionou uma div com a classe "logo", e dentro dela, colocou a imagem do logotipo, digitando o caminho em que ela se encontra dentro do atributo "src".

    <div class="logo">
     <img src="../../../assets/imagens/logo-memoteca.png" alt="Logo da aplicação Memoteca">
    </div>
  7. Abaixo da div, verifica se colocou a outra imagem com o mesmo comando de inserção de imagens, mas desta vez com o caminho da nova imagem no atributo "src":

<img class="imagem" src="../../../assets/imagens/computador-cabecalho.png" alt="Imagem de um computador">

  1. Depois veja no app.component.html se abriu a tag e colou o seletor do componente app-cabecalho.

<app-cabecalho></app-cabecalho>

Espero que te ajude.

Um abraço e bons estudos.

O nome do arquivo que contém as imagens é diferente do nome da colinha dos trechos de codigo, pode ser que seja isso