1

I created a MySQL database named: department. I can display all other columns from the database except the 'logo' which is in BLOB format. I can save image into 'logo' but I cannot display it in a thymeleaf table. Do I need a separate Controller for displaying image?

Here is my Thymeleaf to display image:

<td>
<img th:src="${tempDepartment.logo}" >
</td>

This is my entity:

@Id
@Column(name="id")
@GeneratedValue(strategy=GenerationType.IDENTITY)
private Integer id;

@Column(name="dept_name")
private String deptName;

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

This is my Controller:

//lists all departments
    @GetMapping("/departments")
    public String listDepartments(Model model) {
        List<Department> departments = departmentService.findAll();
        model.addAttribute("departments",departments);
        return "/departments/list"; // Your current thymeleaf template
    }

    //adding a new department
    @GetMapping("/showFormForAdd")
    public String showFormForAdd(Model theModel) {

        Department theDepartment=new Department();
        theModel.addAttribute("department",theDepartment);

        return "/departments/department-form";

    }

    //saving a department
    @PostMapping("/save")
        public String saveDepartment(@ModelAttribute("department") 
           Department theDepartment) {
            departmentService.save(theDepartment);
            return "redirect:/home/departments";
        }

I wish to display an image from the database but it is not showing.

Sam
  • 11
  • 1
  • 5
  • please add the code of your controller method then only able to solve it... what are the parameter set in your `@RequestMapping`.. – Vikrant Kashyap Apr 15 '19 at 10:10
  • Hello Vikrant, I dont write any controller to handle @RequestMapping. However, Ill share some of my controller codes below. – Sam Apr 16 '19 at 04:55

2 Answers2

4

Change your byte[] into a Base64 Image and in html file you need to try this..

< img th:src="*{'data:image/png;base64,'+image}" alt="" />

instead of 

<img th:src="${tempDepartment.logo}" >

here your thymeleaf code will work if your controller have this parameter produces = MediaType.IMAGE_PNG_VALUE

for more details go through with this link

Vikrant Kashyap
  • 6,398
  • 3
  • 32
  • 52
  • Firstly, thank you for the help.But unfortunately the link that you provide does not provide solution. Only another unanswered question. – Sam Apr 15 '19 at 10:35
  • @Sam are you really see that link because what i can see in that link that one verified answer is actually there... So, Please first go through with that and try to judge... Thanks – Vikrant Kashyap Apr 15 '19 at 10:40
3

I solved this way:

  1. Created a class with the method to convert byte array to string Here, the class is having instance method, You can use static method as well, with providing the complete path of the class

    public class ImageUtil { public String getImgData(byte[] byteData) { return Base64.getMimeEncoder().encodeToString(byteData); } }

  2. In the controller, created an instance of ImageUtil, and add into model model.addAttribute("imgUtil", new ImageUtil());

  3. In thymeleaf HTML file, used the below code

<img class='img-thumbnail' th:src="'data:image/jpeg;base64,' + ${imgUtil.getImgData(entity.imgData)}" />

Here, entity is an instance of the JPA entity or POJO

I invested a lot of time and efforts, and finally solved it. :)

Let me know, if you stuck somewhere

Rajiv Kumar
  • 194
  • 9