Angular从Spring RestController中获取图像并缓存它

我有一个使用SpringBoot和Angular2的客户机 - 服务器应用程序。我想通过文件名从服务器加载图像。这工作正常。Angular从Spring RestController中获取图像并缓存它

我在客户端存储属性image：string，我再次将它放在模板中。您可能会关注return 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; 
    } 
}

来源

2016-07-07 Johannes

您可以尝试将'HttpStatus.NOT_MODIFIED'发送给您已经服务过一次的客户端。 – rinukkusu

你可以做这样的事情在服务器端（也许，如果你可以添加一个ETag或Last-Modified头获取该信息）：

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

见HTTP caching part of the reference documentation in Spring。

如果你只是服务的资源和未施加任何额外的逻辑，那么你最好做到以下几点：

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

}

见the other relevant part of the reference documentation。您也可以应用转换并利用缓存清除（see this section as well）。

来源

2016-07-07 15:23:23

非常感谢。 – Johannes

Angular从Spring RestController中获取图像并缓存它

回答

相关问题