Как хранить фото для товара в БД?

Question

Пишу интернет-магазин MVC Rest api с использованием Spring Boot, Hibernate, PostgreSQL. Мне необходимо иметь для товаров фотографии. Соответственно, отсюда вопрос как вообще это реализовать? Вариант с хранением картинок прямо в БД не подойдет, поэтому я решил хранить в БД ссылки на фото, которые у меня хранятся на жестком диске. Но как все это реализовать в коде? В Entity получается у меня поле с типом String?

Java:

private String image;

SQL:

alter table drink add column image varchar;

А в БД столбец с ссылками (путь) к фото? В таком случае как вывести изображение на стороне клиента, ведь мне будет выдаваться не фото, а ссылка? Получается нужно писать некий метод, который будет до вывода находить файл по ссылке и выводить его? Но как?

Answer 1

_{Рекомендую третий вариант - он проще.}

Можно хранить файлы в базе в формате Base64, тоже строка будет, только очень длинная. Размер такой строки в байтах будет больше, чем размер самой картинки. Для доступа к таким картинкам надо будет endpoint писать:
```
@GetMapping(value = "/base64/red-dot")
public ResponseEntity<String> getPicture() {
    // получаем строку base64 из базы
    String base64 = getImagePng("red-dot");

    return ResponseEntity.ok(base64);
}
```
Строка, которая должна храниться в базе (т. е. картинка в формате Base64) должна выглядеть примерно так:
```
data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==
```
На клиенте получаем картинку с помощью javascript:
```
<img id="red-dot" alt="Red dot">
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/base64/red-dot');
    xhr.onload = function() {
        var img = document.getElementById("red-dot");
        img.src = xhr.responseText;
    };
    xhr.send();
</script>
```
См: How to display Base64 images in HTML?
Если хранить файлы в папке на диске - тоже нужен будет endpoint для доступа к ним. На сервере: получаем путь к файлу из БД, зачитываем файл по полученному пути и возвращаем массив байт:

См: Как выложить изображение?

На клиенте:
```
<img src="/endpoint/image" alt="image">
```
Можно добавить эти файлы в ресурсы проекта, в папку src/main/webapp, и загружать вместе с веб приложением. На клиенте путь к картинке (относительно этой папки) будет выглядеть примерно так:
```
<img src="/pictures/image.png" alt="image">
```

БЛОГ НА HUSL

Как хранить фото для товара в БД?

Ответы (1 шт):