#SpringBoot2で画像表示
今回は二つ目の画像表示方法を書いていきます。
②画像データをBase64に変換しimgタグに直接埋め込む方法。
今回の画像表示の方が前回のやり方よりもシンプルなので実装しやすいと思います。
一つ目の画像表示についてはこちらから↓
SpringBoot2で画像表示する2つの方法（1/2）
##全体の流れ
①サーバサイドで画像をバイト列に変換しその後、Base64に変換
②HTMLのimgタグのsrc属性にBase64文字列を埋め込む
##各ファイルを作成
####controllerを作成する
画像ファイルをバイト列に変換後、Base64に変換してます。
下記文字列を追加し画面にデータを渡してます。
data:image/png;base64,
ImageController.java
@Controller
public class ImageController {
@GetMapping("/getImage")
public String getImage(Model model){
File fileImg = new File("img/testimg.png");
try {
byte[] byteImg = Files.readAllBytes(fileImg.toPath());
String base64Data = Base64.getEncoder().encodeToString(byteImg);
model.addAttribute("base64Data","data:image/png;base64,"+base64Data);
}catch(IOException e) {
return null;
}
return "image";
}
}
####htmlを作成する
<th:src>にControllerから受け取ったキーをセット
image.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>画像表示</title>
</head>
<body>
<p>画像表示</p>
<img th:src="${base64Data}">
</body>
</html>