[Fixed] Angular Display Image from Other Source

Issue

Application contains 2 projects:

1. Angular UI (http://localhost:4200) upload image files to Backend
2. Backend API (nodejs, http://localhost:3000) using formidable as below:

const IncomingForm = require('formidable').IncomingForm;

var ImgFolder = new IncomingForm({ uploadDir: 'C:\\Users\\me\\AllUploads' }); // corresponding to 'http://localhost:3000/uploads'

All images uploaded are renamed by formidable to be like upload_0d4e65f99f05e7ed14320890b75e20ae (no extension).

How would I display an uploaded image in the Angular UI? This doesn’t work

<img src="http://localhost:3000/uploads/upload_0d4e65f99f05e7ed14320890b75e20ae"/>

Solution

You can use proxy in your client app.

Example from Angular my project :

{
  "context": [ "/images" ], 
  "target" : "http://localhost:5000", 
  "secure": false, 
  "changeOrigin": true, 
  "logLevel": "debug"
}

With this json proxy configuration I can get files from images directory through http://localhost:4200/images path.