如何在 Spring MVC 中显示多个 base64 编码的图像

Question

我有一个问题...我可以显示通过 Iterable<PostModel> postsMain = postRepository.findAll(); 从数据库接收到的所有帖子的标题（它还包含 blob-images）。但我无法正确理解：为了显示单个图像，我从数据库中获取字节码并将其编码为 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-source: <img class="post-image" 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;
}

祝你好运。

Answer 1

这个问题已经解决了。

@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 中添加了另一个类似的字段（也有 getters ans setters）该字段不会上传到数据库：

private String mainPageImage;

然后我在 for 循环（上面）中通过 setter 设置接收到 Base64 代码，如下所示：

postsMain.get(count).setMainPageImage(base64Encoded);

最后，我们得到了这个 HTML 部分，其中显示来自单个 collection:

的图片和标题

<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>

如何在 Spring MVC 中显示多个 base64 编码的图像

How to display multiple base64 encoded images in Spring MVC

java

spring-mvc

thymeleaf