Як завантажити зображення (та інші активи) у 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 у кутовому 2 у ngFor?

Angular-cli містить папку активів у параметрах збірки за замовчуванням. У мене виникло це питання, коли назва моїх зображень мала пробіли чи тире. Наприклад :

• 'my-image-name.png' має бути 'myImageName.png'
• 'my image name.png' має бути 'myImageName.png'

Якщо ви помістите зображення в папку "активи / імг", то цей рядок коду повинен працювати у ваших шаблонах:

<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. додайте це "ім'я" в тег img src на html-сторінці.

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

для мене "Я" був капіталом у "Образах". що також не сподобалось. тому він також враховує регістри.

Це завжди залежить від того, де знаходиться ваш HTML-файл, який посилається на шлях статичного ресурсу (у цьому випадку зображення).

Приклад A:

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

Як ви бачите, yourpage.html - одна папка від кореня (папка src), тому для повернення до кореня потрібна одна кількість ../, тоді ви можете перейти до зображення з кореня:

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

Приклад B:

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

Тут вам потрібно перейти у дерево на дві папки:

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