Tôi đang cố gắng đặt đường dẫn tương đối đến một trong các hình ảnh của mình trong thư mục nội dung trong thẻ src hình ảnh trong ứng dụng Angular2 của tôi. Tôi đặt một biến trong thành phần của mình thành 'fullImagePath' và sử dụng biến đó trong mẫu của tôi. Tôi đã thử nhiều con đường khả thi khác nhau, nhưng dường như không thể làm nổi hình ảnh của tôi. Có một số đường dẫn đặc biệt trong Angular2 luôn liên quan đến một thư mục tĩnh như trong Django không?
Thành phần
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() {
}
}
Tôi cũng đặt ảnh vào cùng một thư mục với thành phần này, vì vậy vì mẫu và css trong cùng một thư mục đang hoạt động nên tôi không chắc tại sao một đường dẫn tương tự đến hình ảnh lại không hoạt động. Đây là thành phần giống với hình ảnh trong cùng một thư mục.
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>
cây ứng dụng * Tôi đã bỏ thư mục mô-đun nút để tiết kiệm dung lượng
├── 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
this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg')