how to display images in angular using their local image path

Question

I have created a spring rest controller to store images into my local file system and their path into database. Now I want to display these images into a browser as table form using angular5. I get imagePaths as list and serve them in angular as <img src="{{list.imagePath}}">. The image path I get is like D:/images/image1.jpg. but on running this in browser I got sanitized Unsafe url value. How to rectify this problem? Let me know.

I don't think it is duplicate because the real problem is elsewhere - see my answer: _Client cannot access images on your or server's local disk using browser. ..._ — cgrim, Oct 11 '18 at 07:21

score 2 · Accepted Answer · answered Oct 04 '18 at 07:12

2

Client cannot access images on your or server's local disk using browser. It will work only during development in your local development environment when the client comes from the same machine where the application runs.

You have two options:

Place images into servlet container web folder and then they will be available automatically as resources. In Angular you will refer to images using relative path to application root. But this approach is not a good practice - it is not secure and when you redeploy the application images will be lost.
Implement REST action in Spring controller which will provide image data. Then in Angular you will refer to image like this: <img [attr.src]="'/get-image?id=' + list.imageid" />

Image provider method in Spring controller can look like this:

@GetMapping(
  value = "/get-image",
  produces = MediaType.IMAGE_JPEG_VALUE
)
public @ResponseBody byte[] getImage(@RequestParam Integer id) throws IOException {
    Path imagePath = getImagePathFromDb(id);
    return Files.readAllBytes(imagePath);
}

answered Oct 04 '18 at 07:12

cgrim

4,890
1
23
42

Its almost worked for me. but when calling I need to specify hole path like http://localhost:8082/productapi/downloadFile?fileName= .Is there any to simplify this like http://localhost:8082/productapi/downloadFile is constant in all can i use it as a property in ts file r can i make it global property to use all over the application – Siva Oct 08 '18 at 05:23
Yes, you can for example specify base API URL in _environment.ts_ and then you can have different URL for each environment (development, testing, production, ...). Then when you are building the Angular application you can specify the target environment using `environment` parameter like `--environment=dev`. Example of _environment.dev.ts_ file: `export const environment = { production: false, envName: 'dev' apiUrl: 'http://localhost:8082/productapi' }` You can read more about this approach here: http://tattoocoder.com/angular-cli-using-the-environment-option/ – cgrim Oct 08 '18 at 07:02
its done post is closed. thankyou – Siva Oct 11 '18 at 04:15
I'm glad it helped to you. Can you then please accept the answer? – cgrim Oct 11 '18 at 05:25
Yes for sure. The Post is closed – Siva Oct 11 '18 at 07:05
When the problem is solved then the answer which helped to you should be [accepted](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) and not close the question (post) because it can be helpful for other people. There is a gray check mark under the down arrow beside the answer and when you click on it the check mark will become green. – cgrim Oct 11 '18 at 07:26

score 0 · Answer 2 · answered Oct 04 '18 at 06:51

0

With angular you use:

<img [attr.src]="list.imagePath" />

It will prevent from security injection error.

answered Oct 04 '18 at 06:51

Radonirina Maminiaina

6,958
4
33
60

score 0 · Answer 3 · answered Oct 04 '18 at 07:16

You should use bypassSecurityTrustResourceUrl, then angular won't cut out the link.

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from "@angular/platform-browser";

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

Add it to your module, and use it like this

<img src="{{list.imagePath | safeUrl}}">

you mean I have to add the above code in app.module.ts file? — Siva, Oct 08 '18 at 04:17

how to display images in angular using their local image path

3 Answers3