[html] 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. 브라우저가 해당 이미지를 서버에 요청하고 웹팩이 해당 이미지를 제공 할 수 있기 때문에 이것은 잘 작동합니다.


답변