Изображение не отображается сразу в angular

Question

Это в моем component.html:

<div class="image-container">
    {{cat.picture_path}}
    <img src="assets/{{cat.picture_path}}">
</div>

Я поставил {{cat.picture_path}} просто так, чтобы я знал, что picture_path является правильным и тег img, который указывает на это изображение ,

Теперь я сохраняю это изображение через форму в моем бэкэнде, где оно сохраняется в моей папке assets.

Когда я нажимаю "Отправить", изображение сохраняется в правильном месте, но когда я открываю страница, которая отображает это изображение, которое я получаю:

image39.png:1 GET 
http://localhost:4200/assets/image39.png 404 (Not 
Found)
Image (async)...

Изображение присутствует в этой папке, и путь указан правильно.

Что меня смущает, так это то, что это предупреждение исчезает примерно через 10 минут, и изображение отображается без предупреждения.

Я попытался повторно открыть проект angular после добавления фото, но это ничего не меняет. Изображение появится только через некоторое время.

Нужно ли мне каким-либо образом сбрасывать путь или обновлять каталог sh, чтобы angular мог искать изображение?

Что здесь происходит?

обновление 1:

Даже если я go в If http://localhost:4200/assets/image39.png я получу:

core.js:5873 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'assets/image39.png'
Error: Cannot match any routes. URL Segment: 'assets/image39.png'

даже если изображение находится в папке. Если я попытаюсь использовать другое изображение, оно будет работать как положено.

обновление 2:

Повторное открытие angular проекта с ng serve решает эту проблему, но все еще не понимает, почему

обновление 3:

После изменения "outDir": "./dist", в моем файле tsconfig.json и изменения моего тега img на img src="/assets/images/{{cat.picture_path}}" теперь оно отображает изображение вскоре после Я перезагружаю приложение со своей IDE с включенным --liveReload=true. Обновление страницы из браузера ничего не делает. Есть ли способ перезагрузить этот компонент сразу после загрузки изображения?

Answer 1

Проблема заключалась в том, что я сохранял изображения в папке assets, которая используется для содержимого c, которое в основном является частью программного обеспечения. Вот почему мне приходилось перестраивать приложение каждый раз, когда туда добавляли изображение. Не используйте assets для динамического c содержимого.

Для этой цели я использовал свой бэкэнд и настроил точку REST, в которой я отправил изображение по запросу. Теперь каждый раз, когда я загружаю эту страницу, я запрашиваю, чтобы изображение обслуживалось бэкэндом, я получаю URL и помещаю его в свой тег img.

Answer 2

Я думаю, что проблема здесь связана с тем, куда вы загружаете свои изображения. По умолчанию в вашем проекте есть папка assets и папка dist root. При создании проекта Angular копирует папку assets в папку dist, и сервер передает содержимое в браузер из папки dist. Поэтому, когда вы набираете в браузере http://localhost:4200/assets/image39.png, вы ссылаетесь на dist/assets/image39.png. Я думаю, что здесь происходит то, что вы загружаете изображения в папку root assets, но сервер просматривает dist/assets, у которого нет изображения. Когда вы запускаете ng serve с --liveReload=true Angular, автоматически копирует assets в dist/assets при каждом изменении файла, поэтому оно работает, но в работе у вас его нет. Убедитесь, что ваш бэкэнд помещает изображения внутрь dist/assets, и он должен работать нормально.

Answer 3

try

<img src="assets/images/image39.png">

Я думаю, что этот https://github.com/angular/angular-cli/issues/9852 вопрос также связан с вашей проблемой. Если вы хотите любой другой способ, вы можете попробовать решения там.

Кроме этого, проверьте ваш файл tsconfig. json как будет. Если у него есть Изменить это: "outDir": "./dist/out-tsc", Это должно измениться на

"outDir": "./dist", 

это также.