¿Cómo se sirven imágenes en Angular2?

Estoy tratando de poner la ruta relativa a una de mis imágenes en mi carpeta de activos en una etiqueta src de imagen en mi aplicación Angular2. Establecí una variable en mi componente en ‘fullImagePath’ y la usé en mi plantilla. He intentado muchos caminos posibles diferentes, pero parece que no puedo obtener mi imagen. ¿Hay alguna ruta especial en Angular2 que siempre esté relacionada con una carpeta estática como en Django?

Componente

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hero', templateUrl: './hero.component.html', styleUrls: ['./hero.component.css'] }) export class HeroComponent implements OnInit { fullImagePath: string; constructor() { this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg' } ngOnInit() { } } 

También puse la imagen en la misma carpeta que este componente, por lo que dado que la plantilla y css en la misma carpeta están funcionando, no estoy seguro de por qué una ruta relativa similar a la imagen no está funcionando. Este es el mismo componente con la imagen en la misma carpeta.

 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-hero', templateUrl: './hero.component.html', styleUrls: ['./hero.component.css'] }) export class HeroComponent implements OnInit { fullImagePath: string; constructor() { this.fullImagePath = './therealdealportfoliohero.jpg' } ngOnInit() { } } 

html

 

árbol de aplicaciones * Dejé fuera la carpeta de módulos de nodos para ahorrar espacio

 ├── README.md ├── angular-cli.json ├── e2e │  ├── app.e2e-spec.ts │  ├── app.po.ts │  └── tsconfig.json ├── karma.conf.js ├── package.json ├── protractor.conf.js ├── src │  ├── app │  │  ├── app.component.css │  │  ├── app.component.html │  │  ├── app.component.spec.ts │  │  ├── app.component.ts │  │  ├── app.module.ts │  │  ├── hero │  │  │  ├── hero.component.css │  │  │  ├── hero.component.html │  │  │  ├── hero.component.spec.ts │  │  │  ├── hero.component.ts │  │  │  └── portheropng.png │  │  ├── index.ts │  │  └── shared │  │  └── index.ts │  ├── assets │  │  └── images │  │  └── therealdealportfoliohero.jpg │  ├── environments │  │  ├── environment.dev.ts │  │  ├── environment.prod.ts │  │  └── environment.ts │  ├── favicon.ico │  ├── index.html │  ├── main.ts │  ├── polyfills.ts │  ├── styles.css │  ├── test.ts │  ├── tsconfig.json │  └── typings.d.ts └── tslint.json 

Angular solo apunta a la carpeta src/assets , nada más es público para acceder a través de la url, por lo que debe usar la ruta completa

  this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg' 

O

  this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg' 

Esto solo funcionará si la etiqueta href base está configurada con /

Nota en edición: el comando Dist intentará encontrar todos los archivos adjuntos de los activos, por lo que también es importante mantener las imágenes y los archivos a los que desee acceder mediante la URL dentro de los activos, como los archivos de datos simulados también deben estar en los activos.

Si no te gusta la carpeta de activos, puedes editar .angular-cli.json y agregar otras carpetas que necesites.

  "assets": [ "assets", "img", "favicon.ico" ] 

Agregue su ruta de imagen como fullPathname='assets/images/therealdealportfoliohero.jpg' en su constructor. Funcionará definitivamente

Simplemente coloque sus imágenes en la carpeta de activos, refiérase en sus páginas html o ts archivos con ese enlace.

Estoy utilizando el proyecto de plantilla angular Asp.Net Core con una interfaz Angular 4 y un paquete web. Tuve que usar ‘/ dist / assets / images /’ delante del nombre de la imagen, y almacenar la imagen en el directorio assets / images en el directorio dist. p.ej: