DBにある画像の一覧を表示したい

Question

AWS S3のストレージにある画像の一覧を取得してビューに表示する機能を実装しようとしています。

以下のサイトを参考に@ResponseBodyを使用して画像の1つを表示することには成功しました。
https://news.mynavi.jp/itsearch/article/cloud/4615

しかし画像のリストを表示する方法がわからず…
単純にBufferedImageのリストをResponseEntityに格納して出力しようとしてみましたが機能しませんでした。

そこでお伺いしたいのですが、
1.複数の画像を表示したい場合、一般的にどのような方法で出力するのでしょうか？
2.コードに不備があればご指摘願います。

画像は200KBのものを3～5枚程度表示する想定です。（今後表示枚数を増やす可能性あり）

お力をお貸しください。どうぞよろしくお願いいたします。

@Controller
public class ClientController {
	@ResponseBody
	public ResponseEntity getImage() {
		
		List<BufferedImage> images = new ArrayList<>();
		
		String file1 = "${file_name1}";
		String file2 = "${file_name2}";
		
		BufferedImage image1 = s3DownloadHelper.getImage(file1);
		BufferedImage image2 = s3DownloadHelper.getImage(file2);
		
		images.add(image1);
		images.add(image2);
		
		return ResponseEntity.ok().body(images);	//リストは表示されない
//		return ResponseEntity.ok().body(image1);	//ファイル単体は表示される

	}
}

Answer 1

回答に返信するつもりが間違えました。。

Answer 2

静的なコンテンツとしてどこかに吐いてurlを指定するか、data urlを使う。ブラウザのキャッシュは効かないだろうけれど、なんやかんや設定するよりも簡単なので、わたしならdata urlを使うかな。

1. ByteArrayOutputStreamを用意する
2. ImageIO.writeで目的のフォーマットのイメージに変換する
3. data urlに変換する
4. imgタグにdata urlを設定する

Comments

[sakura2685]

回答ありがとうございます！
base64ですが、この規格はデータサイズ自体は大きくなるけれども、リクエストとレスポンスを減らして通信時間を省略する目的で使用されるものと思っています。

今回の場合のようにDBの画像を取ってくる場合だと単にデータが重たくなるだけでいまいち用途とマッチしていない感じがするのですが、この実装が一般的なのでしょうか？？

[shiketa]

とりたてて調べたことはないので、それが一般的なのかどうかは知りませんが、googleの画像検索結果のソースを観察するとdata urlも使われているようです。

[sakura2685]

base64では無事出力できました。

■コントローラー@GetMapping

List<BufferedImage> images = new ArrayList<>();

String file1 = "${filename1}.jpg";
String file2 = "${filename1}.jpg";

BufferedImage image1 = s3DownloadHelper.getImage(file1);
BufferedImage image2 = s3DownloadHelper.getImage(file2);

images.add(image1);
images.add(image2);

List<String> byteImages = new ArrayList<>();

for (BufferedImage i : images) {
ByteArrayOutputStream bos = new ByteArrayOutputStream(); //ストリームをnew
BufferedOutputStream os = new BufferedOutputStream(bos); //bufferedImageを書き込めるストリームに変換
i.flush(); //？？？
try {
ImageIO.write(i, "png", os); //ストリーム(os)にbufferedImage(i)をpng形式で書き込み
String encodedImage = Base64.getEncoder().encodeToString(bos.toByteArray()); //base64形式に変換
byteImages.add(encodedImage);
} catch (IOException e) {
// TODO 自動生成された catch ブロック
e.printStackTrace();
}
}

model.addAttribute("byteImages", byteImages);
}

■ビュー
<th:block th:each="byteimg : ${byteImages}">
<img th:src="${'data:image/png;base64,' + byteimg}">
</th:block>

[sakura2685]

base64では上記で出力できました。