angular - 如何使用本地镜像路径以 Angular 显示图像

Question

这个问题在这里已经有了答案:





WARNING: sanitizing unsafe style value url

(9 个回答)


3年前关闭。




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

Answer 1

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

您有两个选择:

将图像放入 servlet 容器 web 文件夹，然后它们将作为资源自动可用。在 Angular 中，您将使用应用程序根目录的相对路径来引用图像。但是这种方法不是一个好的做法 - 它不安全，并且当您重新部署应用程序图像时会丢失。

在提供图像数据的 Spring Controller 中实现 REST 操作。然后在 Angular 中，你会像这样引用图像:<img [attr.src]="'/get-image?id=' + list.imageid" />

Spring Controller 中的图像提供程序方法如下所示:

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