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

106

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.

html angular angular-cli

— user3183717
fonte

1

sim, você está certo, você forneceu a sintaxe de caminho correta de recursos, pode haver problema com sua incompatibilidade de nome, verifique se a imagem está presente ou não

— Pardeep Jain

1

Definitivamente não é uma incompatibilidade de nome, acabei criando uma publicpasta fora de srce exibindo a imagem com<img class="img-responsive" src="../../public/images/myimage.png">

— user3183717

Corrigido. 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.

— user3183717

1

good :) btw não há necessidade de criar pasta pública extra no Cli atualizado eles já têm o mesmo nome asstes.

— Pardeep Jain

Tenho um problema semelhante com arquivos com outras extensões (por exemplo .sgf). Quero hospedar esses arquivos e criar um link para eles a partir do aplicativo, mas aparentemente simplesmente colocá-los na assetspasta não é suficiente. Alguma ideia ?

— bvdb

72

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.

— user3183717
fonte

62

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?

— Mruanova
fonte

1

o app.component.html e a pasta de ativos estão no mesmo nível?

— Halil

Não, a estrutura da pasta é criada automaticamente e você deve ter as mesmas pastas que eu: pasta-projeto \ src \ assests \ e pasta-projeto \ app \ app.component.html se isso ajudar, favor votar.

— mruanova

26

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.

— jmuhire
fonte

1

[alt] não é necessário para strings, [] é para vinculação de dados.

— chris_r

14

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">

— Bhuwan Maharjan
fonte

qual é a diferença entre src = "assets / img / klogo.png" e [src] = "'assets / img / klogo.png'"?

— gdbj

@gdbj aqui está a resposta stackoverflow.com/questions/41426974/…

— mohit uprim

então, basicamente, usamos [src] para vincular ao modelo se quisermos ser capazes de alterar o src usando esse método.

— gdbj

Obrigado mohit por responder ao tópico. @gdbj Espero que você já tenha resolvido suas confusões.

— Bhuwan Maharjan

Gostaria apenas de indicar aos futuros leitores que procurem as aspas simples internas no primeiro comentário aqui de gdbj. Eles são mais difíceis de ver na fonte do comentário do que na resposta acima, mas perdê-los pode levar a alguma confusão. (Pode depender do seu navegador, não tenho certeza.)

— SilithCrowe

7

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

— chrispy
fonte

angular-cli colocar appe assetspastas separadamente sob a srcpasta. (desculpe, não tenho certeza de como devo formatar a estrutura de pastas e nomes)

— user3183717

5

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");

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

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

— Bheem Singh
fonte

isto é melhor para árvores de hierarquia de arquivos que não são planas.

— chris_r

-1

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.

— Criador anônimo
fonte

-1

É 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">

— sznczy
fonte