Как обслуживать изображения в 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>

дерево приложений * Я забыл папку node для сохранения пространства

├── 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

Ответы

Ответ 1

Angular указывает только на папку src/assets, ничто другое не является общедоступным для доступа через URL, поэтому вы должны использовать полный путь

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

Или

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

Это будет работать, только если для тега base href установлено /

Вы также можете добавить другие папки для данных в angular/cli. Все, что вам нужно изменить, это angular-cli.json

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

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

Я использую проект шаблона Asp.Net Core angular с интерфейсом angular 4 и webpack. Мне пришлось использовать "/dist/assets/images/" перед именем изображения и сохранить изображение в каталоге ресурсов/изображений в каталоге dist. например:

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

Ответ 5

Просто разместите свои изображения в папке с ресурсами на их страницах html или ts с этой ссылкой.

Ответ 6

После ни одного из ответов от стека & у меня работали разные сайты :: до того как сделал работу:

 div::before {
  content: url('../assets/images/Office\ Health\ Logo.svg');
 }