如何在Angular2中提供图像？ [英] How to serve up images in Angular2?

问题描述

我正尝试在我的Angular2应用程序的图像src标记中将相对路径放到我的资产文件夹中。我在我的组件中将变量设置为'fullImagePath'并在我的模板中使用它。我尝试了许多不同的可能路径，但似乎无法让我的形象。 Angular2中是否有一些特殊的路径总是相对于像Django这样的静态文件夹？

组件

 从'@ angular / core'导入{Component，OnInit}; 
 
 @Component（{
选择器：'app-hero'，
 templateUrl：'./hero.component.html'，
 styleUrls：['.// hero.component.css'] 
}）
 
导出类HeroComponent实现OnInit {
 fullImagePath：string; 
 
构造函数（）{
 this.fullImagePath ='../../assets/images/therealdealportfoliohero.jpg'
} 
 
 ngOnInit（ ）{
} 
 
} 
  

我也把图片到这个组件相同的文件夹，所以既然模板和css在同一个文件夹中工作，我不知道为什么图片的类似相对路径不起作用。
$ b

 从'@ angular / core'导入{Component，OnInit} ; 
 
 @Component（{
选择器：'app-hero'，
 templateUrl：'./hero.component.html'，
 styleUrls：['.// hero.component.css'] 
}）
 
导出类HeroComponent实现OnInit {
 fullImagePath：string; 
 
构造函数（）{
 this.fullImagePath ='./therealdealportfoliohero.jpg'
} 
 
 ngOnInit（）{
} 
 
 
 
 
 
 $ b $ 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 
├── app.ponent.css 
 ││├──app.component.html 
││├──app.component.spec.ts 
││├──app.component.ts $ b $││├──应用程式.module.ts 
││├──英雄
│││├──hero.component.css 
│││├──hero.component.html 
││ │├──hero.component.spec.ts 
│││├──hero.component.ts 
│││└──porthe ropng.png 
││├──index.ts 
││└──共享
││└──index.ts 
│├──资产
 ││└──图像
││└──therealdealportfoliohero.jpg 
│├──环境
││├──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 文件夹，其他都不公开，因此您应该使用完整路径 
 
 
  this.fullImagePath ='/ assets / images / therealdealportfoliohero.jpg'
  
或 
 
 this.fullImagePath ='assets / images / therealdealportfoliohero.jpg'
  
只有当基础href标签设置为 /  
时，才能使用
 
 
编辑时注意：
 Dist命令将尝试从资产中查找所有附件，因此保留图像和任何要通过资产内的url访问的文件也很重要，例如模拟json数据文件也应该位于资产中。
 
I am trying to put the relative path to one of my images in my assets folder in an image src tag in my Angular2 app. I set a variable in my component to 'fullImagePath' and used that in my template. I have tried many different possible paths, but just cannot seem to get my image up. Is there some special path in Angular2 that is always relative to a static folder like in Django ?

Component
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() {
  }

}
I also put the picture into the same folder as this component, so since the template, and css in the same folder is working I'm not sure why a similar relative path to the image is not working. This is the same component with the image in the same folder.
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>
app tree * I left out the node modules folder to save space
├── 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 only points to src/assets folder, nothing else is public to access via url so you should use full path
 this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'
Or
 this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'
This will only work if the base href tag is set with /

Note in edit :
Dist command will try to find all attachments from assets so it is also important to keep the images and any files you want to access via url inside assets, like mock json data files should also be in assets.

                        
这篇关于如何在Angular2中提供图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！