user1203497
user1203497

Reputation: 517

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

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: enter image description here

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.

Upvotes: 0

Views: 3483

Answers (2)

Zlatko
Zlatko

Reputation: 19588

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.

Upvotes: 2

Johan Rin
Johan Rin

Reputation: 1950

Can you try :

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

Upvotes: 2

Related Questions