Question

我创建了一个spring rest控制器，用于将图像存储到本地文件系统中，并将其路径存储到数据库中。现在，我想使用angular5将这些图像以表格形式显示在浏览器中。我得到imagePaths作为列表，并以 <img src="{{list.imagePath}}">。我得到的图像路径就像D:/images/image1.jpg。但是在浏览器中运行时，我得到了不安全的url值的清理。如何纠正这个问题？让我知道。

Answer 1

使用角度时，您可以使用：

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

这将防止出现安全性注入错误。

Answer 2

客户端无法使用浏览器访问您或服务器本地磁盘上的图像。仅当客户端来自运行应用程序的同一台计算机时，它才在本地开发环境中的开发过程中起作用。

您有两个选择：

将图像放入servlet容器的web文件夹中，然后它们将自动作为资源使用。在Angular中，您将使用到应用程序根目录的相对路径来引用图像。但是这种方法不是一个好习惯-它不安全，并且当您重新部署应用程序时，映像将丢失。
在Spring控制器中实施REST操作，该操作将提供图像数据。然后在Angular中，您将参考这样的图像：<img [attr.src]="'/get-image?id=' + list.imageid" />

Spring控制器中的图像提供程序方法如下所示：

@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);
}

Answer 3

您应该使用bypassSecurityTrustResourceUrl，否则角度不会切断链接。

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);
  }
}

将其添加到您的模块中，并像这样使用它

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

如何使用其本地图像路径以角度显示图像

3 个答案: