¿Cómo servir 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 probado muchos caminos posibles diferentes, pero parece que no puedo mejorar mi imagen. ¿Hay alguna ruta especial en Angular2 que siempre sea relativa a 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 funcionan, no estoy seguro de por qué una ruta relativa similar a la imagen no funciona. 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

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

árbol de aplicaciones * Dejé fuera la carpeta de módulos de nodo 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 src/assetscarpeta, 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 /

También puede agregar otras carpetas para los datos angular/cli. Todo lo que necesitas modificar esangular-cli.json

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

Nota en la 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 a través de la URL dentro de los activos, como los archivos de datos json simulados también deben estar en los activos.

Si no le gusta la carpeta de activos, puede editar .angular-cli.jsony agregar otras carpetas que necesite.

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

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

Estoy usando el proyecto de plantilla angular Asp.Net Core con un frontal y un paquete web de Angular 4. 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:

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

Simplemente coloque sus imágenes en la carpeta de activos y refiéralas en sus htmlpáginas o tsarchivos con ese enlace.

En angular, solo se solicita una página al servidor, que es index.html. Y index.html y la carpeta de activos están en el mismo directorio. al poner una imagen en cualquier componente, le da un valor src como assets\image.png. Esto funcionará bien porque el navegador hará una solicitud al servidor para esa imagen y el paquete web podrá servir esa imagen.