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

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

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

В нем создана папка "images" в папке "assets", поэтому теперь моя папка изображений src/assets/images

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

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

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

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

EDIT: см. ответ ниже. Мое фактическое имя изображения использовало пробелы, которые Angular не понравилось. Когда я удалял пробелы в имени файла, изображение отображалось правильно.

Ответы

Ответ 1

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

Ответ 2

В моем проекте я использую следующий синтаксис в моем 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?

Ответ 3

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, и убедитесь, что папка ресурсов добавлена в параметры сборки.

Ответ 4

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

Пример примера

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

Ответ 5

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

Ответ 6

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

declare var require: any

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

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

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

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