Как подавать изображения в 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-адрес внутри ресурсов, например, макетные файлы данных json также должны быть в активах.

Если вам не нравится папка с активами, вы можете редактировать .angular-cli.jsonи добавлять другие нужные папки.

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

Добавьте путь к изображению, как fullPathname='assets/images/therealdealportfoliohero.jpg'в конструкторе. Это точно сработает.

Я использую проект шаблона Angular 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, и папка с ресурсами находятся в одном каталоге. при помещении изображения в любой компонент укажите значение src, например assets\image.png. Это будет работать нормально, потому что браузер сделает запрос к серверу для этого изображения, и веб-пакет сможет обслуживать это изображение.