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


106

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.


1
sí, tiene razón, proporcionó la sintaxis de ruta correcta del fodler de activos, podría haber un problema con la falta de coincidencia de su nombre, verifique si la imagen está presente o no
Pardeep Jain

1
Definitivamente no es una falta de coincidencia de nombre, terminé creando una publiccarpeta fuera srcy mostrando la imagen con<img class="img-responsive" src="../../public/images/myimage.png">
user3183717

Arreglado. 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ó.
user3183717

1
bueno :) por cierto, no es necesario crear una carpeta pública adicional en el cli actualizado, ya tienen los mismos nombres.
Pardeep Jain

Tengo un problema similar con archivos con otras extensiones (p .sgf. Ej. ) Quiero alojar esos archivos y vincularlos desde la aplicación, pero aparentemente simplemente ponerlos en la assetscarpeta no es suficiente. Algunas ideas ?
bvdb

Respuestas:


72

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


62

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?


1
¿Están su carpeta app.component.html y assets en el mismo nivel?
Halil

No, la estructura de carpetas se crea automáticamente y debería tener las mismas carpetas que yo: carpeta-proyecto \ src \ assests \ y carpeta-proyecto \ app \ app.component.html si esto ayuda, por favor vote.
mruanova

26

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.


1
[alt] no es necesario para cadenas, [] es para enlace de datos.
chris_r

14

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


¿Cuál es la diferencia entre src = "assets / img / klogo.png" y [src] = "'assets / img / klogo.png'"?
gdbj

@gdbj aquí está la respuesta stackoverflow.com/questions/41426974/…
mohit uprim

entonces, básicamente, usamos [src] para enlazar al modelo si queremos poder cambiar el src usando ese método.
gdbj

Gracias mohit por responder al hilo. @gdbj Espero que ya hayas resuelto tus confusiones.
Bhuwan Maharjan

Me gustaría señalar a los futuros lectores que busquen las comillas simples internas en el primer comentario aquí de gdbj. Son más difíciles de ver en la fuente de comentarios que en la respuesta anterior, pero perderlos podría generar cierta confusión. (Puede depender de su navegador, no estoy seguro)
SilithCrowe

7

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


Ponga angular-cli appy assetscarpetas por separado debajo de la srccarpeta. (lo siento, no estoy seguro de cómo se supone que debo formatear la estructura de carpetas y los nombres)
user3183717

5

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");
  1. agregue este 'imgname' en la etiqueta img src en la página html.

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


esto es mejor para los árboles de jerarquía de archivos que no son planos.
chris_r

-1

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.


-1

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">
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.