Извлечение образа из базы данных MySQL в Spring boot и thymeleaf

Question

Я пытаюсь создать сервис, который извлекает изображение студента вместе с другими текстовыми данными студента, хранящимися в базе данных, и отображает его на странице html. Я пытался, но возвращалось какое-то значение га sh.

Класс моей модели

@Entity
@Table(name = "details")
public class Student {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private long id;

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

    @Column(name = "pic" , length = 2000)
    private byte[] pic;



    public Student(long id, String name, byte[] pic) {
        super();
        this.id = id;
        this.name = name;
        this.pic = pic;
    }



    public Student() {
        super();
        // TODO Auto-generated constructor stub
    }



    public long getId() {
            return id;
        }

    public void setId(long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public byte[] getPic() {
        return pic;
    }

    public void setPic(byte[] pic) {
        this.pic = pic;
    }

    @Override
    public String toString() {
        return "Student [id=" + id + ", name=" + name + "];
    }
    }

Без использования контроллера покоя это будет достигнуто следующим образом?

Мой контроллер

@Controller
public class ImgShowController {

    @Autowired
    EntityRepository entityRepository;



    @RequestMapping("/list")
    public String getAllStudents(Model model) {

        List<Imge> list = (List<Imge>) entityRepository.findAll();
        model.addAttribute("students", list);
        return "liststudents";

    }



    @RequestMapping(path= {"/particularlist","/particularlist/{id}"})
    public String  getImage(@PathVariable("id") Long id, Model model) {

        final Optional<Student> imget = entityRepository.findById(id);
        Imge imge = new Imge(imget.get().getId(), imget.get().getName(), decompressBytes(imget.get().getPic()));
        model.addAttribute("particularStudent", imge);
        return "particularstudent";


    }
    }

Функция распаковки байтов

public static byte[] decompressBytes(byte[] data) {
    Inflater inflater = new Inflater();
    inflater.setInput(data);
    ByteArrayOutputStream outputStream = new ByteArrayOutputStream(data.length);
    byte[] buffer = new byte[1024];
    try {
        while (!inflater.finished()) {
            int count = inflater.inflate(buffer);
            outputStream.write(buffer, 0, count);
        }
        outputStream.close();
    } catch (IOException ioe) {
    } catch (DataFormatException e) {
    }
    return outputStream.toByteArray();
}

Answer 1

Прежде всего, я бы предложил упомянуть, что вы храните двоичный объект (LOB) в столбце pic в своем классе сущности:

@Lob
@Column(name = "pic" , length = 2000)
private byte[] pic;

И затем, похоже, что Thymeleaf не позволяет вам внедрить изображение непосредственно в модель, таким образом, у вас есть 2 способа выполнить sh this:

1.Добавить еще один контроллер для обслуживания изображений

@GetMapping("/students/{id}/image")
public void studentImage(@PathVariable String id, HttpServletResponse response) throws IOException {
    var student = entityRepository.findById(id);
    var imageDecompressed = decompressBytes(student.get().getPic());

    response.setContentType("image/jpeg");
    InputStream is = new ByteArrayInputStream(imageDecompressed);
    IOUtils(is, response.getOutputStream());
}

, а затем ссылаться на него из модели следующим образом: это:

<img th:src="@{'students/' + @{studentId} + '/image'}">

2.Использование base64

Вам необходимо закодировать изображение в виде строки base64:

var base64EncodedImage = Base64.getEncoder().encodeToString(imageData);

, а затем выполнить настройку в модели следующим образом:

<img th:src="@{'data:image/jpeg;base64,'+${base64EncodedImage}}"/>

---

Я бы предложил использовать первый способ, потому что в противном случае вы зависели бы от размера изображения, а общая полезная нагрузка была бы на 30% больше (base64), поэтому, используя первый способ, вы позволяете браузеру пользователя решать, как и когда загрузить определенное изображение