Angular 5: How do I access image files outside the app or assets folder?

Question

I have app where user can upload images. I read that I need to upload these files outside the app or assets folder as those folders get compiled. My app folder structure looks like this:

User files are supposed to go into media folder. Right now I have there example file media/user/default_dp.jpg , but how do I access to this file in component template? Writing just

`<div class="my-dp dp rounded-circle" [ngStyle]="{'background-image':url(./media/user/default_dp.jpg)'}">`

does not do the trick.

Answer 1

You should not (in this case) consider those as a part of your app. Consider those media files as things that come from backend, instead.

The uploaded files are completely separated form your Angular app. Your "server" folder will likely have something like that (or better, move it completely outside of the sources). Your server needs to, on upload, put the files somewhere publically accessible, or provide an endpoint where it will serve those files. And whatever this backend server gives you is gonna be where you fetch it from.

Answer 2

你能试一下吗 ：

<div class="my-dp dp rounded-circle" [ngStyle]="{'background-image': './media/user/default_dp.jpg'}"></div>