1

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.

user2304483
  • 1,462
  • 6
  • 28
  • 50

1 Answers1

3

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.

Dulanjaya Tennekoon
  • 2,408
  • 1
  • 18
  • 31
  • These files are not part of deployment, they are created by the users. If I put them inside the asset there is a possibility of loosing data on deployment. – user2304483 Mar 15 '19 at 09:36
  • What I am telling is not to put anything inside your assets folder, except static resources. If the user uploads an image, save it in somewhere using your backend and do not try to access that image file directly from your angular app, but access as a URL. you can use a server to host those images. – Dulanjaya Tennekoon Mar 15 '19 at 09:41
  • Which means, upload the images to a folder of a ftp server. This is the best practice. – Dulanjaya Tennekoon Mar 15 '19 at 09:42
  • I am saving the file name cause the url is dynamic and your idea make sense I just have difficulties to calculate the url. The java app is localhost:8080 but the files are outside the java app as well. – user2304483 Mar 15 '19 at 09:44
  • Basically, there is no difficulty in implementing this. Once you store the files in a folder, you can make that folder hosted using Chrome Web Server. So the url will be localhost://{your_assigned_port}/filename. So yes, you can save the file name – Dulanjaya Tennekoon Mar 15 '19 at 09:48
  • I'm using tomcat server, so you suggest to save the images inside the Java app ? – user2304483 Mar 15 '19 at 09:53
  • Nope. Inside any folder in your computer. So that you can host that folder. It is neither inside your backend nor inside your frontend. You can host that folder using Chrome Web Server for the development purposes – Dulanjaya Tennekoon Mar 15 '19 at 09:56
  • At the moment this folder is not in the frontend nor the backend so it's good. But I'm not sure what do you mean CHrome Web server. I'm using tomcat as web server for the java app. – user2304483 Mar 15 '19 at 09:59
  • I have added that in my answer. You can install that. That is a simple web server – Dulanjaya Tennekoon Mar 15 '19 at 10:04
  • I'm confuse, you give solution for chrome browser only ? – user2304483 Mar 15 '19 at 10:08
  • No dude. I said, that is for your development purposes. In order to have a proper solution, you need to setup an ftp server. – Dulanjaya Tennekoon Mar 15 '19 at 10:10
  • You can host your folder using tomcat too. (No need of chrome web server) You just need to add a context to the server.conf in your tomcat – Dulanjaya Tennekoon Mar 15 '19 at 10:11
  • Can you explain what do you want the ftp server to do ? – user2304483 Mar 15 '19 at 10:12
  • https://stackoverflow.com/questions/417658/how-to-config-tomcat-to-serve-images-from-an-external-folder-outside-webapps – Dulanjaya Tennekoon Mar 15 '19 at 10:13
  • Yeah. That is to host your images. Otherwise, you cant simply display the images stored outside your angular app. You cant ask angular to show some image using a absolute url. You need a relative url from the your angular root folder – Dulanjaya Tennekoon Mar 15 '19 at 10:14
  • It looks like the link you provide is what I need! But I'm getting tired going for coffee and cigarette. – user2304483 Mar 15 '19 at 10:16