Показать изображения, добавленные во время выполнения пользователем в Angular

Question

Я работаю с Angular 5 и пытаюсь показать изображения, которые пользователь загрузил со своей стороны.

Когда пользователь загружает изображение, я помещаю это изображение в папку ресурсов, затем я будусохранить путь к изображению и имя в базе данных ( assets / images / userupload / example.jpg ).

, затем я установлю этот путь как источник изображения <img src="assets/images/userupload/example.jpg" />

но показывает 404 (не найдено) ошибка.Получая URL-адрес из исходного кода страницы и пытаясь открыть его на новой вкладке, я получаю эту ошибку Ошибка: ошибка (в обещании): ошибка: невозможно сопоставить ни один маршрут.Сегмент URL: 'assets / images / userupload / example.jpg'

после того, как angular скомпилирован, все работает отлично, и ни одна из вышеперечисленных ошибок больше не появляется.

Может кто-то указать, что я делаю не так, и я должен поместить его в папку активов в первую очередь?

РЕДАКТИРОВАТЬ: HTML-код

<img *ngIf="carModel.imageUrl && carModel.imageId" [src]="carModel.imageUrl" height=250 width=400 alt="car model">

Answer 1

Отметьте две вещи:

1. Вы используете относительный путь.На что он действительно указывает, и на какой именно путь вы хотели указать?

2. Ваша ошибка указывает на то, что ваш сервер не распознает этот путь как путь к активам.

   • Если вы используете сервер разработчика с ng serve:
     Проверьте в файле .angular-cli.json путь, по которому вы пытаетесь загрузить ресурсы изуказан в качестве пути к активу, например:

     {
       …
       "apps": [
         {
           …
           "assets": [
             "assets",
             …
           ],
           …
         }
       ],
       …
     }
     

   • Если вы работаете с веб-сервером, проверьте, настроен ли путь ресурса для обслуживания из файловой системы.а не через Angular.

Answer 2

Тестировали ли вы остановку подачи и перезапуск подачи?С Firefox вы тестировали свою картинку по абсолютному пути?

пример: http://mycomputer/assets/images/userupload/example.jpg