Как загрузить изображение (и другие активы) в Angular проект?

Я новичок в Angular, поэтому не уверен, что лучше всего это сделать.

Я использовал angular-cli и ng new some-projectдля создания нового приложения.

В нем создана папка «изображения» в папке «активы», так что теперь папка с изображениями src/assets/images

В app.component.html(который является корнем моего приложения) я помещаю

<img class="img-responsive" src="assets/images/myimage.png">

Когда я ng serveпросматриваю свое веб-приложение, изображение не отображается.

Как лучше всего загружать изображения в приложение Angular?

РЕДАКТИРОВАТЬ: см. Ответ ниже. В моем фактическом имени изображения использовались пробелы, что не нравилось Angular. Когда я удалил пробелы в имени файла, изображение отображалось правильно.

Я починил это. В моем фактическом имени файла изображения были пробелы, и по какой-то причине Angular это не понравилось. Когда я удалил пробелы из имени файла, assets/images/myimage.pngсработало.

В моем проекте я использую следующий синтаксис в app.component.html:

<img src="/assets/img/1.jpg" alt="image">

или

<img src='http://mruanova.com/img/1.jpg' alt='image'>

используйте [src] как выражение шаблона, когда вы привязываете свойство с помощью интерполяции:

<img [src]="imagePath" />

такой же как:

<img src={{imagePath}} />

Источник: как связать img src в angular 2 в ngFor?

Angular-cli по умолчанию включает папку с ресурсами в параметры сборки. У меня возникла эта проблема, когда в имени моих изображений были пробелы или тире. Например :

• my-image-name.png должно быть myImageName.png.
• 'my image name.png' должно быть 'myImageName.png'

Если вы поместите изображение в папку assets / img, то эта строка кода должна работать в ваших шаблонах:

<img alt="My image name" src="./assets/img/myImageName.png">

Если проблема не устранена, просто проверьте, есть ли у вас файл конфигурации Angular-cli, и убедитесь, что папка с вашими ресурсами добавлена ​​в параметры сборки.

Поскольку Angular2 является специфичным для 5, мы можем привязать путь к изображению, используя привязку свойств, как показано ниже. Путь к изображению заключен в одинарные кавычки.

Образец примера

<img [src]="'assets/img/klogo.png'" alt="image">

Обычно «приложение» является корнем вашего приложения - вы пробовали app/path/to/assets/img.png?

1. Добавьте эту строку сверху в компоненте.

declare var require: any

2. добавьте эту строку в свой класс компонента.

imgname= require("../images/imgname.png");

3. добавьте это imgname в тег img src на странице html.

   <img src={{imgname}} alt="">

для меня «Я» было главным в «Образах». что тоже не понравилось angular-cli. поэтому он также чувствителен к регистру.

Это всегда зависит от того, где находится ваш html-файл, который ссылается на путь статического ресурса (в данном случае изображения).

Пример А:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

Как видите, yourpage.html находится на расстоянии одной папки от корня (папка src), по этой причине для возврата к корню требуется одно количество ../, после чего вы можете перейти к изображению из корня:

<img class="img-responsive" src="../assests/images/myimage.png">

Пример Б:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

Здесь вам нужно пройти в дереве по 2 папкам:

<img class="img-responsive" src="../../assests/images/myimage.png">