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-project para generar una nueva aplicación.
En él creó una carpeta de "imágenes" en la carpeta "activos", por lo que ahora mi carpeta de imágenes es src/assets/images
En app.component.html (que es la raíz de mi aplicación), pongo
<img class="img-responsive" src="assets/images/myimage.png"> Cuando ng serve para 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.
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 una expresión de plantilla cuando vincula una propiedad mediante interpolación:
<img [src]="imagePath" />es lo mismo que:
<img src={{imagePath}} />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.png funcionó.
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 :
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.