Como carregar imagem (e outros ativos) no Angular um projeto?

Eu sou muito novo no Angular, então não tenho certeza da melhor prática para fazer isso.

Usei angular-cli e ng new some-projectpara gerar um novo aplicativo.

Nele criei uma pasta "imagens" na pasta "ativos", então agora minha pasta de imagens está src/assets/images

Em app.component.html(que é a raiz do meu aplicativo), coloco

<img class="img-responsive" src="assets/images/myimage.png">

Quando faço isso ng servepara visualizar meu aplicativo da web, a imagem não é exibida.

Qual é a prática recomendada para carregar imagens em um aplicativo Angular?

EDITAR: Veja a resposta abaixo. O nome real da minha imagem estava usando espaços, dos quais Angular não gostou. Quando removi os espaços no nome do arquivo, a imagem foi exibida corretamente.

Eu consertei isso. Meu nome de arquivo de imagem real tinha espaços e, por alguma razão, o Angular não gostou disso. Quando retirei os espaços do meu nome de arquivo, assets/images/myimage.pngfuncionou.

Em meu projeto, estou usando a seguinte sintaxe em meu app.component.html:

<img src="/assets/img/1.jpg" alt="image">

ou

<img src='http://mruanova.com/img/1.jpg' alt='image'>

use [src] como uma expressão de modelo ao vincular uma propriedade usando interpolação:

<img [src]="imagePath" />

é o mesmo que:

<img src={{imagePath}} />

Fonte: como vincular img src em angular 2 em ngFor?

Angular-cli inclui a pasta de ativos nas opções de construção por padrão. Eu tenho esse problema quando o nome das minhas imagens tem espaços ou travessões. Por exemplo :

• 'my-image-name.png' deve ser 'myImageName.png'
• 'my image name.png' deve ser 'myImageName.png'

Se você colocar a imagem na pasta assets / img, esta linha de código deve funcionar em seus modelos:

<img alt="My image name" src="./assets/img/myImageName.png">

Se o problema persistir, apenas verifique se seu arquivo de configuração Angular-cli e certifique-se de que sua pasta de ativos foi adicionada nas opções de construção.

Sendo específico para Angular2 a 5, podemos vincular o caminho da imagem usando a vinculação de propriedade conforme abaixo. O caminho da imagem está entre aspas simples.

Exemplo de amostra

<img [src]="'assets/img/klogo.png'" alt="image">

Normalmente, "app" é a raiz do seu aplicativo - você já tentou app/path/to/assets/img.png?

1 Adicione esta linha no topo do componente.

declare var require: any

2 adicione esta linha em sua classe de componente.

imgname= require("../images/imgname.png");

3. adicione este 'imgname' na tag img src na página html.

   <img src={{imgname}} alt="">

para mim, "eu" era capital em "Imagens". que também o angular-cli não gostou. por isso também faz distinção entre maiúsculas e minúsculas.

É sempre dependente de onde está seu arquivo html que se refere ao caminho do recurso estático (neste caso, a imagem).

Exemplo A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

Como você pode ver, yourpage.html está a uma pasta de distância da raiz (pasta src), por esta razão ela precisa de uma quantidade de ../ para voltar à raiz, então você pode ir até a imagem a partir da raiz:

<img class="img-responsive" src="../assests/images/myimage.png">

Exemplo B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Aqui você tem que ir para a árvore por 2 pastas:

<img class="img-responsive" src="../../assests/images/myimage.png">