在Angular 5中保存和读取图像的最佳实践是什么？

Question

I've Angular 5 app with java rest services, the Java application saved images in a folder which is outside the java app. Now, the Angular suppose to read these images. Because these images are shared by both applications, it make sense to save them outside but it doesn't work or not sure how to do it.

Example of scenario I have: The Java app saved images into:

C:\Users\MyName\Documents\workspace\myentitiy

The Angular component has the following template:

<img [src]=imagesPath alt="">

The imagesPath declared inside the component:

public imagesPath :any = "../myentitiy/1/myfiles/1/body.png";

My assets folder (which not include the images I need again as the requirement):

C:\Users\MyName\Documents\workspace\MyAngularApp\src\assets

I've tried to changes imagesPath to different path but couldn't make it to work, any idea how Angular can access files outside or I HAVE to change the Java application to save into the Angualr's assets folder?

Thanks.

Answer 1

What you are trying to do is wrong. Think about the deployment. What you want to do is,

From the front-end, you can upload images. Those image will be uploaded to the back-end, so that you can store the image in a particular folder inside a ftp server. Now, you can store the url of that image in the database. When you are loading those images from the front-end, back-end sends you the image URLs loaded from the database.

Then you can show those images.

Keeping a shared location only works when you are developing your application, but not when you are deploying it.

For the development purposes, you may try to save all the images inside a folder, and store the URLs. You can use Chrome Web Server to host images. This is only for the development purposes. Anyway, when you are deploying, you need to workout on image uploading part from your Java backend to the FTP server.