在Spring Boot Rest API中將圖像發送到Angular客戶端？

Question

我正在使用Spring Boot開發Rest API。 我有一個上傳圖像服務，該圖像服務將圖像存儲在我的項目工作區中，圖像URL存儲在數據庫中。 我有一個包含圖像列表的實體產品。 現在，我必須將圖像返回給有角度的客戶端。

我想到兩個問題：

Q1。 我應該只將圖像網址列表返回給客戶端嗎？ 如果是，客戶端應如何從這些URL渲染圖像。

Q2。 還是我應該返回圖像列表本身？ 如果是，請告訴我快速高效的邏輯。

Q3。 還是我應該一張一張地返回單個圖像？ 如果是，請告訴我如何。

更新：

注意：由於，Rest api位於一台計算機上，而Angular客戶端位於另一台計算機上。 我認為圖片網址需要某種前綴：

假設我的項目在E：/ myproject /中，圖像在E：/myproject/images/image-name.jpg中，那么圖像URL的前綴應該是什么。

Answer 1

Q1。 我應該只將圖像網址列表返回給客戶端嗎？ 如果是，客戶端應如何從這些URL渲染圖像。

回答：將網址列表返回為angular。 Angular將使用此代碼。

<div *ngFor="let image of images">
   <img src={{image.ImagePath}} />
</div>

它將自動獲取網址路徑中顯示的圖像

Answer 2

Q1。 我應該只將圖像網址列表返回給客戶端嗎？ 如果是，客戶端應如何從這些URL渲染圖像。

這 。 由於接下來您要做的就是在前端提供這些urls <img src="something.png" />標記。 這還將使服務器免於下載映像並將其提供給客戶端的責任。

Q2。 還是我應該返回圖像列表本身？ 如果是，請告訴我快速高效的邏輯。

這是可能的，但是非常困難。 我不建議這樣做，因為這會使系統下載兩次映像：首先是從文件存儲到后端，然后是第二個從后端到前端。

Q3。 還是我應該一張一張地返回單個圖像？ 如果是，請告訴我如何。

如果圖像在下載時需要單獨的安全性，則這是您需要采取的方法。 使用您提供的第一種方法可以確保圖像下載的安全，並且再次，這種方法將使您下載圖像兩次。

Answer 3

private static final Map<String, MediaType> TYPE_MAP = new HashMap();

    static {
        TYPE_MAP.put("pdf", MediaType.APPLICATION_PDF);
        TYPE_MAP.put("gif", MediaType.IMAGE_GIF);
        TYPE_MAP.put("jpg", MediaType.IMAGE_JPEG);
        TYPE_MAP.put("jpeg", MediaType.IMAGE_JPEG);
        TYPE_MAP.put("png", MediaType.IMAGE_PNG);
        TYPE_MAP.put("html", MediaType.TEXT_HTML);
        TYPE_MAP.put("xls", MediaType.parseMediaType("application/vnd.ms-excel"));
        TYPE_MAP.put("xlsx", MediaType.parseMediaType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"));
    }



@GetMapping(value = "/preview")
    public ResponseEntity<Resource> previewFile(@RequestParam String filePath) {
        Resource resource = new UrlResource(Paths.get(filePath).toUri());
        String fileName = testFile.png;
        String extension = png;
        MediaType mediaType = TYPE_MAP.getOrDefault(extension,MediaType.APPLICATION_OCTET_STREAM);
        return ResponseEntity.ok()
                .header(HttpHeaders.CONTENT_DISPOSITION, "filename=\"" + fileName + "\"")
                .contentType(mediaType)
                .body(file);
    }

將filePath發送到有角度的客戶端，並使用此服務來預覽該文件。