我有一個問題......我可以顯示從資料庫接收到的所有帖子的標題Iterable<PostModel> postsMain = postRepository.findAll();（它還包含 blob 影像）。但我無法正確理解：為了顯示單個影像，我從 DB 獲取位元組碼并將其編碼為 base64 代碼，如何使用多個影像并像標題一樣顯示它們？
我像這樣顯示單個影像：
Optional<PostModel> post = postRepository.findById(id);
byte[] encodeBase64 = Base64.encodeBase64(post.get().getImage());
String base64Encoded = new String(encodeBase64, "UTF-8");
modelAndView.addObject("contentImage", base64Encoded );
HTML 源代碼： <img th:src="@{'data:image/jpeg;base64,' ${contentImage}}">
我嘗試創建List添加 base64 編碼字串值的位置。
我的控制器：
@GetMapping("/")
public ModelAndView home ( Model model) throws UnsupportedEncodingException {
ModelAndView modelAndView = new ModelAndView("home");
Iterable<PostModel> postsMain = postRepository.findAll();
List<String> contentImages = new ArrayList<>();
int size = Iterables.size(postsMain);
for(int count = 0; count <= size; count ) {
byte[] encodeBase64 = Base64.encodeBase64(postsMain.iterator().next().getImage());
String base64Encoded = new String(encodeBase64, "UTF-8");
contentImages.add(base64Encoded);
}
modelAndView.addObject("contentImages", contentImages);
modelAndView.addObject("posts_main", postsMain);
return modelAndView;
}
美好的愿望。
uj5u.com熱心網友回復：
這個問題解決了。
@GetMapping("/")
public ModelAndView home ( Model model) throws UnsupportedEncodingException {
ModelAndView modelAndView = new ModelAndView("home");
List<PostModel> postsMain = (List<PostModel>) postRepository.findAll();
int size = Iterables.size(postsMain); //Receiving size of Iterator
byte[] encodeBase64 = new byte[size];
for(int count = 0; count < size; count ) {
encodeBase64 = Base64.encodeBase64(postsMain.get(count).getImage());
String base64Encoded = base64Encoded = new String(encodeBase64, "UTF-8");
postsMain.get(count).setMainPageImage(base64Encoded);
}
modelAndView.addObject("posts_main", postsMain);
return modelAndView;
}
更新：我在我的PostModel（也有 getter ans setter）中添加了另一個類似的欄位，這個欄位不會上傳到資料庫：
private String mainPageImage;
然后我Base64通過for回圈中的setter設定接收到的代碼（上圖），如下所示：
postsMain.get(count).setMainPageImage(base64Encoded);
最后，我們有這個HTML部分顯示來自單個集合的圖片和標題：
<main>
<div class="post-section">
<div class="main-post" th:each="post : ${posts_main}">
<div class="container">
<img class="post-image" th:src="@{'data:image/jpeg;base64,' ${post.mainPageImage}}"/>
<a href="/"><span th:text="${post.title}"></span></a>
</div>
</div>
</div>
</main>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/360460.html