Как подавать изображения в Angular2?


80

Я пытаюсь поместить относительный путь к одному из моих изображений в папке с ресурсами в теге изображения src в моем приложении Angular2. Я установил в своем компоненте переменную 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

4
Почему вы хотите использовать относительный путь? Разве мы не можем настроить его так, чтобы он запускался с корня (т.е. this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg')
Гарри Нинь

1
К сожалению, это не сработало. Как приложение узнает, где находится корень? Это корень проекта или это всегда активы для статических файлов, таких как css, изображения и javascript?
TJB

Да, это действительно зависит от вашей настройки. Что касается меня, я отделяю активы от части кода (имея для них разные задачи gulp), поэтому я точно знаю, где находятся активы.
Гарри Нинь

Фвью, наконец, заставил работать Гарри. Вы были правы, используя полный путь. Причина, по которой он не работал, была проблема, с которой я сталкивался в прошлом при использовании Photoshop, и неправильный экспорт изображений оттуда. Argghhh Photoshoppppp! В любом случае, спасибо, Гарри!
TJB

Ответы:


110

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 будет пытаться найти все вложения из ресурсов, поэтому также важно сохранить изображения и любые файлы, к которым вы хотите получить доступ через URL-адрес внутри ресурсов, например, макетные файлы данных json также должны быть в активах.


1
Спасибо за ответ, мне это очень помогло. Я был бы признателен, если бы вы сказали мне, где в официальных документах это задокументировано?
Ziv Glazer

Проекты Angular, созданные с помощью angular-cli track, из которых можно использовать ресурсы в .angular-cli.jsonфайле. См. Ответ @ michal-ambrož для получения дополнительной информации.
kevin.groat

1
Спасибо! ... когда вы играли с Angular в течение нескольких месяцев и внезапно понимаете, что вам еще не нужно было добавлять ни одного изображения ;-)
Simon_Weaver

«Это будет работать, только если базовый тег href установлен с /» Что мне нужно сделать, если мой базовый href нужно настроить на другой путь, потому что мое приложение будет работать в подкаталоге на сервере?
Жиль

Он найдет папку с активами в этом каталоге, так что, думаю, проблем не возникнет,
Умар Юнис,

11

Если вам не нравится папка с активами, вы можете редактировать .angular-cli.jsonи добавлять другие нужные папки.

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

3
Почему, если я добавлю, "assets": [ "assets", "assets/images", "favicon.ico" ],это все равно не работает?
bielas 01


3

Я использую проект шаблона Angular Asp.Net Core с интерфейсом Angular 4 и веб-пакетом. Мне пришлось использовать '/ dist / assets / images /' перед именем изображения и сохранить изображение в каталоге assets / images в каталоге dist. например:

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

Но когда вы в разработке, это не сработает?
devN

2
@davaus, вероятно, потому что вы уже сделали сборку, поэтому ваш старый dist просто сидит там. Если вы обновите изображение, оно не будет обновляться, пока вы не соберете его.
Simon_Weaver 02

В этом есть смысл. Благодарю.
Даваус

1

Просто поместите свои изображения в папку с ресурсами, укажите их на своих htmlстраницах или в tsфайлах с этой ссылкой.


1

В angular с сервера запрашивается только одна страница, то есть index.html. И index.html, и папка с ресурсами находятся в одном каталоге. при помещении изображения в любой компонент укажите значение src, например assets\image.png. Это будет работать нормально, потому что браузер сделает запрос к серверу для этого изображения, и веб-пакет сможет обслуживать это изображение.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.