1

I'm building a nodejs + angular application. On the server-side I have a function that uploads a new image to my angular folder under assets/images/uploads, it also saves the path of where i have uploaded it to a database.

In my angular I want to be able to show that image right after I have uploaded it. I'm trying to do this by saying:

 <img  mat-card-image src="../../{{users.profilePicture}}"  alt="Test">

my users.profilePicture contains the correct path to where my image is stored. This doesn't work because the path is not found. However, if i restart my angular application with "ng serve" the picture will be found and displayed as desired.

I've drawn the conclusion that this must be because the assets of my application are loaded once the application starts, and cannot detect that new ones have been added while the server is already running. Is there any way to bypass this, so that I can get my angular to reload my assets folder and detect that there has been added a new picture to the folder, while the application is already running?

Thomas
  • 111
  • 2
  • 10
  • Refer to this SO question: https://stackoverflow.com/questions/27554765/use-of-ng-src-vs-src – Hossein May 27 '18 at 10:53
  • i looked into the thread. I tried [src]="users.profilePicture" instead, and resulted in the same result ([src] is the angular 2+ way of ng-src) – Thomas May 27 '18 at 12:06

1 Answers1

0

Ng serve loads your app in memory, so newly added items won't include in your compiled app. You can find some solutions in this SO post: Serve assets as they are dynamically added

Hossein
  • 1,640
  • 2
  • 26
  • 41