SpringBootとAngular2を使用するクライアントサーバーアプリケーションがあります。サーバーからファイル名で画像を読み込みたいのですが。これは正常に機能します。
属性image：stringをクライアントに保存し、それをテンプレートに再度配置します。res.urlを返すことに注意を払うかもしれません。; 私は実際のリソースを使用していません。これは間違っている可能性があります。
私の目的は、画像をキャッシュすることです。私の理解では、Webブラウザは自動的に画像をキャッシュできます。正しい？しかし、キャッシングはまだ機能しておらず、誰かが私に何を調整する必要があるかについてのヒントを教えてくれるかもしれません。別のヘッダーが必要ですか？
サーバー（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;
}
}
サーバー側で次のようなことを行うことができます（そして、その情報を取得できる場合は、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());
}
}
リファレンスドキュメントの他の関連部分を参照してください。変換を適用し、キャッシュバスティングを活用することもできます（このセクションも参照してください）。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加