0

Good day dear community. I got a problem when trying to display received image from MySQL via Base64. Image uploaded and stored on DB without a problems.

My model class:

@Entity
public class PostModel {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;

@Column (name = "title")
private String title;

@Column (name = "preview")
private String preview;

@Column (name = "content")
private String content;

@Column (name = "views")
private int views;

@Lob
@Column (name = "image")
private byte[] image;

//Getters and setters

Controller:

    @GetMapping("/blog/{id}")
    public String showContent(@PathVariable(value = "id") long id, Model model) throws 
    UnsupportedEncodingException {
    
    if (!postRepository.existsById(id)) {
        return "redirect:/post_not_exist";
    }
    Optional<PostModel> post = postRepository.findById(id);
    ArrayList<PostModel> content = new ArrayList<>();
    post.ifPresent(content::add);
    model.addAttribute("post", content);

    
    byte[] encodeBase64 = Base64.getEncoder().encode(post.get().getImage());
    String base64Encoded = new String(encodeBase64, "UTF-8");
    model.addAttribute("contentImage", base64Encoded );
    return "post_content";
    }

And HTML tag:

   <img src="data:image/jpg;base64,${contentImage}"/>

For result, I have this: The problem element

What I doing wrong?

Good wishes.

Igor Gorski
  • 23
  • 1
  • 6

1 Answers1

1

You need to add to the view with modelAndView.addObject("contentImage",base64Encoded ); and also import ModelAndView and change your method to ModelAndView and instance the class ModelAndView with ModelAndView modelAndView = new ModelAndView("view"); like this:

import org.springframework.web.servlet.ModelAndView;

@GetMapping("/blog/{id}")

public ModelAndView showContent(@PathVariable(value = "id") long id, Model model) throws 
UnsupportedEncodingException {

if (!postRepository.existsById(id)) {
    return "redirect:/post_not_exist";
}
Optional<PostModel> post = postRepository.findById(id);
ArrayList<PostModel> content = new ArrayList<>();
post.ifPresent(content::add);
model.addAttribute("post", content);


byte[] encodeBase64 = Base64.getEncoder().encode(post.get().getImage());
String base64Encoded = new String(encodeBase64, "UTF-8");
model.addAttribute("contentImage", base64Encoded );

ModelAndView modelAndView = new ModelAndView("view");
modelAndView.addObject("contentImage",base64Encoded );
return modelAndView;

}

With this, you can call the variables returned from `modelAndView and you can add more values if you want.

Here is a link that can help you with this topic with some examples: ModelAndView

Jose Lora
  • 1,392
  • 4
  • 12
  • 18
  • Sorry, but my problem still wasn't solved... I flagged your anwser as solution, I got base64 image and trying to set this in HTML page : `` . But It is not displaying and returns: `` I saw so many similar cases from other programmers, this doesn,t works. Please, if you know this, can you help me? I wanna to pay reputation for you, but I still can't... – Igor Gorski Nov 11 '21 at 17:10
  • are you sure that's the right image in base64 format? is because I tested that image and doesn't work. can you add the image into a comment? – Jose Lora Nov 11 '21 at 17:41
  • Check this article to convert your image in bytes to base64. https://stackoverflow.com/questions/36492084/how-to-convert-an-image-to-base64-string-in-java – Jose Lora Nov 11 '21 at 17:48
  • Yes! All Right! Your advice Is helped me! :) I found a problem when uploading image to DB, the image was uploaded not correctly and I have wrong binary code. Thank You so much! Sorry, but I am still beginner... – Igor Gorski Nov 11 '21 at 21:13