¿Cómo cargar la imagen (y otros activos) en Angular un proyecto?

Soy bastante nuevo en Angular, así que no estoy seguro de cuál es la mejor práctica para hacer esto.

Usé angular-cli y ng new some-projectpara generar una nueva aplicación.

En él creó una carpeta "imágenes" en la carpeta "activos", por lo que ahora mi carpeta de imágenes src/assets/images

En app.component.html(que es la raíz de mi aplicación), puse

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

Cuando lo hago ng servepara ver mi aplicación web, la imagen no se muestra.

¿Cuál es la mejor práctica para cargar imágenes en una aplicación Angular?

EDITAR: Vea la respuesta a continuación. El nombre de mi imagen real estaba usando espacios, lo que a Angular no le gustó. Cuando eliminé los espacios en el nombre del archivo, la imagen se mostró correctamente.

Lo arreglé. Mi nombre de archivo de imagen real tenía espacios, y por alguna razón a Angular no le gustó eso. Cuando eliminé los espacios de mi nombre de archivo, assets/images/myimage.pngfuncionó.

En mi proyecto, estoy usando la siguiente sintaxis en mi app.component.html:

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

o

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

use [src] como expresión de plantilla cuando esté vinculando una propiedad mediante interpolación:

<img [src]="imagePath" />

es lo mismo que:

<img src={{imagePath}} />

Fuente: ¿cómo enlazar img src en angular 2 en ngFor?

Angular-cli incluye la carpeta de activos en las opciones de compilación de forma predeterminada. Recibí este problema cuando el nombre de mis imágenes tenía espacios o guiones. Por ejemplo :

• 'my-image-name.png' debería ser 'myImageName.png'
• 'my image name.png' debería ser 'myImageName.png'

Si coloca la imagen en la carpeta assets / img, entonces esta línea de código debería funcionar en sus plantillas:

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

Si el problema persiste, simplemente verifique si su archivo de configuración Angular-cli y asegúrese de que su carpeta de activos esté agregada en las opciones de compilación.

Siendo específicos de Angular2 a 5, podemos vincular la ruta de la imagen utilizando el enlace de propiedad como se muestra a continuación. La ruta de la imagen está entre comillas simples.

Ejemplo de muestra

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

Normalmente, "aplicación" es la raíz de su aplicación, ¿lo ha intentado app/path/to/assets/img.png?

1. Agregue esta línea en la parte superior del componente.

declare var require: any

2. agregue esta línea en su clase de componente.

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

3. agregue este 'imgname' en la etiqueta img src en la página html.

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

para mí "yo" era capital en "Imágenes". que tampoco le gustó a angular-cli. por lo que también distingue entre mayúsculas y minúsculas.

Siempre depende de dónde esté su archivo html que se refiere a la ruta del recurso estático (en este caso, la imagen).

Ejemplo A:

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

Como puede ver, yourpage.html está a una carpeta de la raíz (carpeta src), por esta razón necesita una cantidad de ../ para volver a la raíz y luego puede caminar a la imagen desde la raíz:

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

Ejemplo B:

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

Aquí tienes que ir en el árbol por 2 carpetas:

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