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.

media is a directory of your sources folder. What is deployed in production is not your sources folder. When you submit a form in you app, you store the submitted data in a database, right? To consult this data, you have a REST service allowing to get this data, and thus exposing the data stored in the database over HTTP, right? Well, uploaded images should be treated the same way: you store them in some database (which could be a well organized folder in the server), and to expose them over HTTP, you write a REST service that reads the image and serves it over HTTP. — JB Nizet, Dec 09 '18 at 09:56
Are you looking for include other folders like https://stackoverflow.com/questions/39538464/how-to-include-custom-files-with-angular-cli-build ? — Eliseo, Dec 09 '18 at 10:22
@Eliseo If I include `media` folder that is outside the assets, in config file under assets, wont it mean that now compiler compiles it? — user1203497, Dec 09 '18 at 10:31

score 2 · Answer 1 · answered Dec 09 '18 at 09:56

2

Can you try :

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

answered Dec 09 '18 at 09:56

Johan Rin

1,900
2
20
42

That missing ' is just typo, it get automatically ignored/fixed. That didn't do the trick. – user1203497 Dec 09 '18 at 10:23

Zlatko · Accepted Answer · 2018-12-10T06:49:45.373

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.

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

2 Answers2