在 Spring Boot 网页中显示数据库中存储的图像

问题描述 投票:0回答:1

我有一个关于如何显示存储在数据库中的图像的问题,我尝试了很多解决方案,但似乎没有任何帮助。 我可以存储图像,但事实证明显示它们很困难。 我不知道如何解决这个问题 任何帮助将不胜感激!!!

所有者.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Owners</title>
</head>
<body>
<h1>Owners</h1>
<table border="1">
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Profile Picture</th>
    </tr>
    </thead>
    <tbody>
    <!-- Iterate over each owner -->
    <tr th:each="owner : ${owners}">
        <td th:text="${owner.name}"></td>
        <td th:text="${owner.age}"></td>
        <td>
            <img th:src="|data:image/png;base64,${#strings.toString(owner.profilePicture)}|" alt="Profile Picture"/>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>

OwnerController.java

package com.gestion.g04.controllers;

import com.gestion.g04.models.Owner;
import com.gestion.g04.services.OwnerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.List;

@Controller
public class OwnerController {

    @Autowired
    private OwnerService ownerService;

    @GetMapping("/owners")
    public String getAllOwners(Model model) {
        List<Owner> owners = ownerService.getAllOwners();
        model.addAttribute("owners", owners);
        return "owners";
    }

    @GetMapping("/add-owner")
    public String showOwnerForm(Model model) {
        model.addAttribute("owner", new Owner());
        return "add-owner";
    }

    @PostMapping("/add-owner")
    public String addOwner(@ModelAttribute Owner owner, @RequestParam("file") MultipartFile file) {
        try {
            if (file.isEmpty()) {
                return "redirect:/add-owner?error=file";
            }
            // Convert the file to a byte array and save it in the owner entity
            byte[] picture = file.getBytes();
            owner.setProfilePicture(picture);
            ownerService.addOwner(owner.getName(), owner.getAge(), file);
        } catch (IOException e) {
            e.printStackTrace();
            return "redirect:/add-owner?error=file";
        }
        return "redirect:/owners";
    }
}

OwnerService.java

package com.gestion.g04.services;

import com.gestion.g04.models.Owner;
import com.gestion.g04.repositories.OwnerRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.util.StringUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.List;
import java.util.Objects;

@Service
public class OwnerService {
    @Autowired
    private OwnerRepository ownerRepository;

    public List<Owner> getAllOwners() {
        return ownerRepository.findAll();
    }

    @Transactional
    public void addOwner(String name, int age, MultipartFile profilePicture) throws IOException {
        Owner owner = Owner.builder()
                .name(name)
                .age(age)
                .build();

        if (profilePicture != null && !profilePicture.isEmpty()) {
            String fileName = StringUtils.cleanPath(Objects.requireNonNull(profilePicture.getOriginalFilename()));
            owner.setProfilePicture(profilePicture.getBytes());
            owner.setProfilePictureName(fileName);
        }

        ownerRepository.save(owner);
    }
}

Chatgpt 没办法,我也尝试过堆栈溢出

java html spring spring-boot
1个回答
0
投票

您可以尝试将图像保存为base64在数据库中,然后在gui中显示base64图像

© www.soinside.com 2019 - 2024. All rights reserved.