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

[Bug] As imagens não apareceram

Referente ao curso Angular: construa uma aplicação web com componentes, linguagem de template e CLI, no capítulo Estruturando a agenda e atividade Montando o cabeçalho

por Weslley Yuri Ferreira dos Santos
| 76.9k xp | 3 posts

As imagens não apareceram, e o estilo azul do fundo tbm não foi aplicado. Vi que o colega, anteriormente, passou por um problema parecido e a Rafaela passou uma possível solução, porém verifiquei no meu projeto o arquivo angular.json e ele está conforme a Rafaela disse, apontando para o endereço src/assets como deveria. Mas ainda assim, as imagens não aparecem. Assim está o layout do projeto: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

E assim está o arquivo angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "indexa": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/indexa",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "optimization": false,
              "extractLicenses": false,
              "sourceMap": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "buildTarget": "indexa:build:production"
            },
            "development": {
              "buildTarget": "indexa:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "buildTarget": "indexa:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "4aedb77f-cee8-41eb-b6b1-7a9151703436"
  }
}
4 respostas
por Rafaela Petelin Silvério
| 279.5k xp | 615 posts
Alura Scuba Team Monitora de Fórum

Olá, Weslley! Tudo bem com você?

Peço que verifique os seguintes passos em sua aplicação:

  1. Verifique os caminhos das imagens: Certifique-se de que as imagens logo.png e banner.png estão realmente na pasta src/assets. Além disso, revise o caminho no HTML para garantir que está correto: 

    <img src="/assets/logo.png" class="logo">
<img src="/assets/banner.png" class="banner">

    O uso do / no início do caminho indica que ele é relativo à raiz do projeto.

  2. Cheque o arquivo CSS: Verifique se o estilo de fundo azul está realmente definido no arquivo src/styles.css. Por exemplo, em styles.css:

     ```css
     body {
         background: linear-gradient(180deg, #3D8BFD 0%, #E7F1FF 100%);
         margin: 0;
         min-height: 100vh;
     }
 ```

  3. Cache do navegador: Às vezes, o navegador pode estar usando uma versão em cache do seu aplicativo. Tente limpar o cache ou abrir o navegador no modo anônimo para ver se isso resolve o problema.

  4. Console do navegador: Abra o console do desenvolvedor no navegador (geralmente com F12) e veja se há mensagens de erro relacionadas ao carregamento das imagens ou aplicação de estilos.

Se ao conferir esses pontos tudo estiver correto, recomendamos que nos mande seu código aqui através do repositório no GitHub para que possamos verificar e te trazer uma solução mais assertiva.

Espero ter ajudado! Conte sempre com o apoio do fórum :)

Um forte abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Weslley Yuri Ferreira dos Santos
| 76.9k xp | 3 posts

Oi, Rafaela! Obrigado pela ajuda! Descobri que o caminho estava errado. Anteriormente, na imagem da lixeirinha, por exemplo, o path para o diretório era: /indexa/src/assets/trash.png Corrigi para: /assets/trash.png e deu certo. Apliquei o mesmo nos outros caminhos das imagens e deu certinho :) Porém o fundo azul (que era pra estar azul) ainda está branco como anteriormente :/ E assim está o arquivo styles.css:

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400;1,600;1,700&family=Zen+Dots&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,700;1,400;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Zen+Dots&display=swap');

body {
  background: linear-gradient(180 deg, #3d8bfd 0%, #e7f1ff 100%);
  margin: 0;
  min-height: 100vh;
}

O que será que pode ser?

solução!
por Rafaela Petelin Silvério
| 279.5k xp | 615 posts
Alura Scuba Team Monitora de Fórum

Oi Weslley! Tudo bem? Que bom que conseguiu corrigir as imagens!

Verifiquei e acredito que o erro na cor de fundo está relacionado a sua linha do background. Observe que você deixou um espaço entre 180 e deg na definição do gradiente:

  background: linear-gradient(180 deg, #3d8bfd 0%, #e7f1ff 100%);

Na versão corrigida, ambos devem ficar juntos:

    background: linear-gradient(180deg, #3D8BFD 0%, #E7F1FF 100%);

Feita essa correção, já deve funcionar normalmente.

Conte sempre com o apoio do fórum. Espero ter te ajudado!

Bons estudos! Abraço✨

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Weslley Yuri Ferreira dos Santos
| 76.9k xp | 3 posts

MEU DEUS DO CÉU!! KKKKKKKK era isso, Rafaela!! Muito muito mutio obrigado pelo help, viu!