Image not showing right away in angular

Question

This is in my component.html:

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

I have put {{cat.picture_path}} just so I know that picture_path is correct and img tag which points to that image.

Now I am saving that image though form to my backend where it is saved to my assets folder.

When I click submit the picture is saved to correct location but when I open a page that displays that image I get:

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

The image is present in that folder and the path is correct.

What confuses me is that this warning goes away after 10 or so minutes and picture is displayed without a warning.

I tried reopening angular project after adding photo but that doesn't change anything. The picture will only appear after an amount of time.

Do I have to somehow reset the path or refresh directory so that angular can look for image?

What is going on here?

update 1:

Even If I go to If http://localhost:4200/assets/image39.png I get:

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'

even though image is in the folder. If I try with other image it works as expected.

update 2:

Reopening angular project with ng serve solves this problem but still do not understand why

update 3:

After changing "outDir": "./dist", in my tsconfig.json file and chanign my img tag to img src="/assets/images/{{cat.picture_path}}" it now displays the image shortly after I reload the app with my IDE with --liveReload=true enabled. Refreshing the page from browser doesn't do anything. Is there a way to reload this component right away when image is uploaded?

Answer 1

The problem was that I was saving the images in assets folder which is used for static content that is basically part of the software. That is why I had to rebuild the app every time image was added there. Do not use assets for dynamic content.

For this purpose I used my backend and set up a REST point where I served the image by request. Now every time I load that page, I am requesting that image to be served by backend, I get the url and put it in my img tag.