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

问题描述

我试图将我的一张图片的相对路径放在我的资产文件夹中我的 Angular2 应用程序的图片 src 标签中.我在我的组件中将一个变量设置为fullImagePath"并在我的模板中使用它.我尝试了许多不同的可能路径，但似乎无法提升我的形象.Angular2 中是否有一些特殊的路径总是相对于 Django 中的静态文件夹?

组件

import { Component, OnInit } from '@angular/core';@零件({选择器:应用英雄"，templateUrl: './hero.component.html',styleUrls: ['./hero.component.css']})导出类 HeroComponent 实现 OnInit {fullImagePath: 字符串；构造函数(){this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'}ngOnInit() {}}

我也将图片与此组件放在同一文件夹中，因此由于同一文件夹中的模板和 css 正在运行，我不确定为什么类似的图像相对路径不起作用.这是与同一文件夹中的图像相同的组件.

import { Component, OnInit } from '@angular/core';@零件({选择器:应用英雄"，templateUrl: './hero.component.html',styleUrls: ['./hero.component.css']})导出类 HeroComponent 实现 OnInit {fullImagePath: 字符串；构造函数(){this.fullImagePath = './therealdealportfoliohero.jpg'}ngOnInit() {}}

html

<div class="col-xs-12"><img [src]="fullImagePath">

app tree * 我省略了 node modules 文件夹以节省空间

├── 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.component.css│ │ ├── app.component.html│ │ ├── app.component.spec.ts│ │ ├── app.component.ts│ │ ├── app.module.ts│ │ ├── 英雄│ │ │ ├── hero.component.css│ │ │ ├── hero.component.html│ │ │ ├── hero.component.spec.ts│ │ │ ├── hero.component.ts│ │ │ └── portheropng.png│ │ ├── index.ts│ │ └── 分享│ │ └── index.ts│ ├──资产│ │ └── 图片│ │ └── therealdealportfoliohero.jpg│ ├──环境│ │ ├── environment.dev.ts│ │ ├── environment.prod.ts│ │ └── environment.ts│ ├── favicon.ico│ ├── index.html│ ├── main.ts│ ├── polyfills.ts│ ├── style.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

资产":[资产"，"图片","favicon.ico",.htaccess"]

编辑注意: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 /

You can also add other folders for data in angular/cli. All you need to modify is angular-cli.json

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

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屋！