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

Erro 404 - image not found

Referente ao curso Angular 2: webapps ainda mais poderosas parte 1

por Octávio Henrique Bueno
| 110.4k xp | 18 posts

Galera, estou desenvolvendo minha aplicação com Angular 2 utilizando angular-cli mas não conseguindo adicionar uma imagem em meu navBar. Ele dá o seguinte erro: Failed to load resource: the server responded with a status of 404 (Not Found). Minha imagem tem a seguinte estrutura: 

loja6 
      -> src 
           -> img 
               -> logo.png.

E abaixo meu código:

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#" style="padding:0px;">
        <img src="src/img/logo.png" style="height:100%;">
      </a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">A Clinica</a></li>
      <li><a href="#">Tratamentos</a></li>
      <li><a href="#">Marque sua avaliação</a></li>
      <li><a href="#">Fale conosco</a></li>
    </ul>
  </div>
</nav>

<router-outlet></router-outlet>

Alguém poderia me ajudar?

9 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Octávio, tudo bom?

Poderia subir o projeto no GitHub, e me mandar o link para eu dar uma olhada? \o

por Octávio Henrique Bueno
| 110.4k xp | 18 posts

Sim, claro. O link é: https://github.com/ohbueno07/Projetos_Octavio_3/tree/master/src

por Octávio Henrique Bueno
| 110.4k xp | 18 posts

O projeto está disponível lá mas ainda com o mesmo problema.

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Octávio tudo bom?

Cara, encontrei o problema, vamos lá!

O seu projeto não está encontrando a pasta img enquanto você está em desenvolvimento, para isso basta adicionar o nome da pasta no arquivo .angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "loja6"
  },
  "apps": [
    {
      "root": "src", // diretório raiz da aplicação é definido aqui.
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico",
        "img" // Adicionar essa linha
      ],

Feito isso, altere a chamada do arquivo logo.png, pois o site já está rodando a partir da pasta src:

    <!-- Logo -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#" style="padding:0px;">
        <img src="./img/logo.png" style="height:100%;">
      </a>
    </div>

Feito isso, rode um npm install e me diga se deu tudo certo ai =D

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Octávio, tudo bom, deu tudo certo?

por Octávio Henrique Bueno
| 110.4k xp | 18 posts

Ainda não kkkk Então, eu não estou conseguindo dar npm install. Está dando erro "unsupported platform for fsevents@1.1.2". Eu cheguei tarde do trabalho quarta e quinta e não consegui ver com mais detalhes. Mas hoje vou criar um novo projeto e testar a sua sugestão, daí te dou um feedback. Obrigado Mario.

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Opa, fico feliz se conseguir ti ajudar \o

Bom, uma dica extra que posso dar é, roda um node -v e checa a sua versão do node, e compara com a versão mais atual da plataforma no site dela https://nodejs.org/en/

Pode instalar a versão Current :)

por Octávio Henrique Bueno
| 110.4k xp | 18 posts

Funcionou aqui. Muito obrigado, Mario =)

Então, toda pasta que eu criar e colocar arquivos lá, tenho que mapear em assets no angular-cli, senão não funciona?

por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Ao que tudo indica, só se você criar uma nova pasta no mesmo nivel do arquivo index.html, se for uma pasta interna é só criar usar e ser feliz =D