Як обслуговувати зображення в Angular2?

Я намагаюся встановити відносний шлях до одного зі своїх зображень у моїй папці активів у тегу src зображення в моєму додатку Angular2. Я встановив змінну в моєму компоненті на 'fullImagePath' і використав це у своєму шаблоні. Я пробував безліч різних можливих шляхів, але, здається, не можу покращити свій образ. Чи існує якийсь спеціальний шлях у Angular2, який завжди є відносно статичної папки, як у Django?

Компонент

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() {
  }

}

Я також помістив зображення в ту ж папку, що і цей компонент, тому, оскільки шаблон і css в тій самій папці працюють, я не впевнений, чому подібний відносний шлях до зображення не працює. Це той самий компонент із зображенням в тій же папці.

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>

дерево додатків * Я залишив папку вузлів модулів, щоб заощадити місце

├── 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 вказує лише на src/assetsпапку, ніщо інше не є загальнодоступним для доступу через url, тому слід використовувати повний шлях

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

Або

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

Це буде працювати, лише якщо для базового тегу href встановлено /

Ви також можете додати інші папки для даних у angular/cli. Все, що вам потрібно змінити, цеangular-cli.json

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

Примітка в редагуванні: Команда Dist спробує знайти всі вкладення з активів, тому також важливо зберігати зображення та будь-які файли, до яких ви хочете отримати доступ за допомогою URL-адреси, всередині активів, наприклад, файли даних mock json також повинні бути в активах.

Якщо вам не подобається папка "активи", ви можете редагувати .angular-cli.jsonта додавати інші потрібні папки.

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

Додайте шлях до зображення, як fullPathname='assets/images/therealdealportfoliohero.jpg'у вашому конструкторі. Це точно спрацює.

Я використовую проект кутового шаблону Asp.Net Core з передньою частиною Angular 4 та веб-пакетом. Мені довелося використовувати '/ dist / assets / images /' перед назвою зображення та зберігати зображення в каталозі assets / images у каталозі dist. наприклад:

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

Просто помістіть свої зображення в папку активів, посилайтеся на них на своїх htmlсторінках або у tsфайлах із цим посиланням.

У angular лише одна сторінка вимагає від сервера, тобто index.html. А index.html та папка assets знаходяться в одному каталозі. вкладаючи зображення в будь-який компонент, надайте значення src, як assets\image.png. Це буде працювати нормально, оскільки браузер надсилатиме запит на сервер для цього зображення, і веб-пакет зможе обслуговувати це зображення.