Angular2에서 이미지를 제공하는 방법은 무엇입니까?

Angular2 앱의 이미지 src 태그에있는 자산 폴더의 내 이미지 중 하나에 대한 상대 경로를 입력하려고합니다. 내 구성 요소의 변수를 '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 명령은 자산에서 모든 첨부 파일을 찾으려고 시도하므로 모의 json 데이터 파일과 같이 자산 내부의 URL을 통해 액세스하려는 모든 파일과 이미지를 유지하는 것도 중요합니다.

자산 폴더가 마음에 들지 않으면 .angular-cli.json필요한 다른 폴더를 편집 하고 추가 할 수 있습니다 .

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

fullPathname='assets/images/therealdealportfoliohero.jpg'생성자에서 와 같이 이미지 경로를 추가하십시오 . 확실히 작동합니다.

Angular 4 프런트 엔드 및 웹팩과 함께 Asp.Net Core 각도 템플릿 프로젝트를 사용하고 있습니다. 이미지 이름 앞에 '/ dist / assets / images /'를 사용하고 dist 디렉터리의 assets / images 디렉터리에 이미지를 저장해야했습니다. 예 :

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

자산 폴더에 이미지를 넣으면 해당 링크가있는 html페이지 또는 ts파일 에서 참조 할 수 있습니다 .

각도에서는 index.html이라는 서버에서 한 페이지 만 요청됩니다. 그리고 index.html과 assets 폴더는 동일한 디렉토리에 있습니다. 모든 구성 요소에 이미지를 넣는 동안 assets\image.png. 브라우저가 해당 이미지를 서버에 요청하고 웹팩이 해당 이미지를 제공 할 수 있기 때문에 이것은 잘 작동합니다.