Angular從Spring RestController獲取圖像並緩存它

Question

我有一個使用SpringBoot和Angular2的Client-Server應用程序。 我想通過文件名從服務器加載圖像。 這很好用。

我將屬性image：string存儲在客戶端，然后再次將其放入模板中。 你可能會注意返回res.url; ; 我不使用實際的資源，這可能是錯誤的。

我的目標是緩存圖像。 據我所知，網絡瀏覽器可以自動緩存圖像。 正確？ 但是緩存還沒有工作，也許有人可以給我一個需要調整的提示？ 是否需要不同的標題？

服務器（SpringBoot）

public class ImageRestController {
    @RequestMapping(value = "/getImage/{filename:.+}", method = RequestMethod.GET)
    public ResponseEntity<Resource> getImage(@PathVariable String filename) {

        try {
            String path = Paths.get(ROOT, filename).toString();
            Resource loader = resourceLoader.getResource("file:" + path);
            return new ResponseEntity<Resource>(loader, HttpStatus.OK);
        } catch (Exception e) {
            return new ResponseEntity<Resource>(HttpStatus.NOT_FOUND);
        }
    }
}   

客戶（Angular2）

@Component({
  selector: 'my-image',
  template: `
    <img src="{{image}}"/>
  `
})

export class MyComponent {

  image:string;
  constructor(private service:MyService) {}

  showImage(filename:string) {
    this.service.getImage(filename)
      .subscribe((file) => {
          this.image = file;
        });
      }
}

export class MyService() {
  getImage(filename:String):Observable<any> {
    return this.http.get(imagesUrl + "getImage/" + filename)
      .map(this.extractUrl)
      .catch(this.handleError);
  }
  extractUrl(res:Response):string {
    return res.url;
  }
}

Answer 1

您可以在服務器端執行類似的操作（如果可以獲取該信息，可以添加ETag或Last-Modified標頭）：

return ResponseEntity
            .ok()
            .cacheControl(CacheControl.maxAge(30, TimeUnit.DAYS))
            .body(loader);

請參閱Spring中參考文檔的HTTP緩存部分 。

如果您只是提供資源而不應用任何其他邏輯，那么您最好執行以下操作：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/getImage/**")
                .addResourceLocations("classpath:/path/to/root/")
                .setCacheControl(CacheControl.maxAge(1, TimeUnit.DAYS).cachePublic());
    }

}

請參閱參考文檔的其他相關部分 。 您還可以應用轉換並利用緩存清除（ 請參閱本節 ）。