html - form - ng submit angular 6

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

Question

Soy bastante nuevo en Angular, así que no estoy seguro de 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 hago el 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: Ver la respuesta a continuación. Mi nombre de imagen real estaba usando espacios, que a Angular no le gustaba. Cuando eliminé los espacios en el nombre del archivo, la imagen se mostró correctamente.

Answer 1

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

Answer 2

Al ser específico para Angular2 a 5, podemos vincular la ruta de la imagen utilizando el enlace de propiedades como se muestra a continuación. La ruta de la imagen está encerrada entre comillas simples.

Ejemplo de ejemplo

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

Answer 3

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, 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, solo 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.

Answer 4

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 enlace una propiedad mediante interpolación:

<img [src]="imagePath" />

es lo mismo que:

<img src={{imagePath}} />

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

Answer 5

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

Answer 6

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