Flask вывод изображения из базы данных?

от
prokoding.ru > HTML > Flask вывод изображения из базы данных?

Отличный вопрос! Вывод изображения из базы данных в Flask — это классическая задача, которая состоит из двух основных частей: хранения изображения в БД и создания маршрута в Flask для его отображения в HTML.

Рассмотрим оба этапа максимально подробно.

---

Часть 1: Хранение изображения в базе данных

Существует два основных подхода к хранению изображений:

  1. Хранение в виде BLOB (Binary Large OBject) данных: Сам файл изображения сохраняется непосредственно в поле таблицы базы данных.
  • Плюсы: Целостность данных (изображение всегда привязано к записи), простота бэкапов.
  • Минусы: Сильно увеличивает размер базы данных, менее эффективно при частом чтении/записи, сложнее кэшировать.
  1. Хранение пути к файлу: В базе данных сохраняется только путь (относительный или абсолютный) к файлу изображения, который лежит в файловой системе сервера.
  • Плюсы: База данных остается легкой, легко использовать кэширование, стандартные инструменты для работы с файлами.
  • Минусы: Нужно следить за целостностью (если удалить файл, запись в БД будет битой), усложняются бэкапы (нужно бэкапить и БД, и папку с файлами).

Рекомендация: Для большинства веб-приложений лучше использовать второй подход (хранение пути). Он более гибкий и производительный. Мы рассмотрим оба, но начнем с более распространенного.

Пример структуры таблицы (SQLAlchemy model)

Способ 1: Хранение пути к файлу (Рекомендуемый)

from flask_sqlalchemy import SQLAlchemy
from flask import Flask
import os

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///images.db'
app.config['UPLOAD_FOLDER'] = 'static/uploads'  # Папка для загрузки изображений
db = SQLAlchemy(app)

class Image(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    # Здесь хранится только имя файла или относительный путь
    filename = db.Column(db.String(100), nullable=False)
    # Можно добавить описание, дату загрузки и т.д.
    description = db.Column(db.Text)

    def __repr__(self):
        return f'<Image {self.filename}>'

Способ 2: Хранение данных изображения (BLOB)

class Image(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100))
    data = db.Column(db.LargeBinary)  # Поле для хранения бинарных данных
    mimetype = db.Column(db.String(20)) # Важно хранить MIME-тип (например, 'image/jpeg')

---

Часть 2: Создание маршрута Flask для вывода изображения

Теперь создадим маршруты (views), которые будут обрабатывать запросы на получение изображения.

Маршрут для способа 1 (Хранение пути)

Здесь все просто. Мы просто используем стандартный HTML-тег <img>, который ссылается на файл в папке static. Flask автоматически обслуживает файлы из папки static.

  1. Загрузка изображения на сервер (для примера):
    from werkzeug.utils import secure_filename

    @app.route('/upload', methods=['GET', 'POST'])
    def upload_file():
        if request.method == 'POST':
            file = request.files['file']
            if file and file.filename != '':
                # Обезопасим имя файла
                filename = secure_filename(file.filename)
                # Сохраняем файл в папку UPLOAD_FOLDER
                file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
                # Сохраняем запись в БД
                new_image = Image(filename=filename, description=request.form.get('description'))
                db.session.add(new_image)
                db.session.commit()
                return 'Файл успешно загружен!'
        return '''
        <form method="post" enctype="multipart/form-data">
            <input type="file" name="file">
            <input type="text" name="description" placeholder="Описание">
            <input type="submit" value="Загрузить">
        </form>
        '''
  1. Вывод изображения в HTML:

Поскольку файл лежит в static/uploads, путь к нему будет /static/uploads/filename.jpg.

    <!-- В вашем шаблоне HTML (например, show_images.html) -->
    <!DOCTYPE html>
    <html>
    <head>
        <title>Галерея</title>
    </head>
    <body>
        <h1>Мои изображения</h1>
        {% for image in images %}
            <div>
                <h3>{{ image.description }}</h3>
                <!-- Используем стандартный тег img с src, указывающим на файл в static -->
                <img src="{{ url_for('static', filename='uploads/' + image.filename) }}" alt="{{ image.description }}" width="300">
            </div>
        {% endfor %}
    </body>
    </html>
  1. Маршрут, который отображает этот шаблон:
    @app.route('/')
    def index():
        images = Image.query.all()
        return render_template('show_images.html', images=images)

Маршрут для способа 2 (Хранение BLOB)

В этом случае нельзя просто указать ссылку на файл. Нужен специальный маршрут, который будет извлекать бинарные данные из БД и возвращать их в виде HTTP-ответа с правильным MIME-типом.

  1. Маршрут для отдачи изображения:
    @app.route('/image/<int:image_id>')
    def get_image(image_id):
        image = Image.query.get_or_404(image_id) # Находим изображение по ID
        # Возвращаем ответ с данными изображения и правильным заголовком Content-Type
        return Response(image.data, mimetype=image.mimetype)
  1. Вывод изображения в HTML:

В атрибуте src тега <img> мы указываем URL нашего специального маршрута, передавая ему image.id.

    <!-- В вашем шаблоне HTML -->
    <img src="{{ url_for('get_image', image_id=image.id) }}" alt="{{ image.name }}" width="300">

---

Полный пример кода (Способ 1 - Рекомендуемый)

Вот законченный пример приложения, использующий хранение путей.

Структура папок:

your_flask_app/
├── app.py
├── static/
│   └── uploads/       (создайте эту папку вручную)
└── templates/
    └── show_images.html

Файл app.py:

import os
from flask import Flask, render_template, request, redirect, url_for
from flask_sqlalchemy import SQLAlchemy
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///images.db'
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['MAX_CONTENT_LENGTH'] = 2 * 1024 * 1024  # Макс. размер файла 2MB

# Создаем папку для загрузок, если ее нет
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

db = SQLAlchemy(app)

class Image(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    filename = db.Column(db.String(100), nullable=False)
    description = db.Column(db.Text)

# Создаем таблицы (выполнить один раз в консоли)
with app.app_context():
    db.create_all()

@app.route('/')
def index():
    images = Image.query.all()
    return render_template('show_images.html', images=images)

@app.route('/upload', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
        file = request.files['file']
        description = request.form.get('description', '')
        
        if file and file.filename != '':
            filename = secure_filename(file.filename)
            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            file.save(file_path)
            
            new_image = Image(filename=filename, description=description)
            db.session.add(new_image)
            db.session.commit()
            
            return redirect(url_for('index'))
    
    return '''
    <h2>Загрузить новое изображение</h2>
    <form method="post" enctype="multipart/form-data">
        <p><input type="file" name="file" accept="image/*"></p>
        <p><input type="text" name="description" placeholder="Описание изображения"></p>
        <p><input type="submit" value="Загрузить"></p>
    </form>
    <p><a href="/">Вернуться к галерее</a></p>
    '''

if __name__ == '__main__':
    app.run(debug=True)

Файл templates/show_images.html:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Галерея изображений</title>
    <style>
        .image-container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            display: inline-block;
        }
        img {
            max-width: 300px;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Галерея изображений</h1>
    <p><a href="{{ url_for('upload_file') }}">Загрузить новое изображение</a></p>

    {% if images %}
        {% for image in images %}
            <div class="image-container">
                <img src="{{ url_for('static', filename='uploads/' + image.filename) }}" 
                     alt="{{ image.description }}">
                <p><strong>Описание:</strong> {{ image.description }}</p>
            </div>
        {% endfor %}
    {% else %}
        <p>Изображений пока нет.</p>
    {% endif %}
</body>
</html>

---

Дополнительные соображения и улучшения

  1. Валидация файлов: Всегда проверяйте расширение и MIME-тип файла, чтобы запретить загрузку исполняемых файлов.
    ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}

    def allowed_file(filename):
        return '.' in filename and 
               filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS

    # Используйте в маршруте загрузки:
    if file and allowed_file(file.filename):
        # ... процесс загрузки ...
  1. Генерация уникальных имен файлов: Чтобы избежать перезаписи файлов с одинаковыми именами, генерируйте уникальные имена.
    import uuid
    filename = str(uuid.uuid4()) + '_' + secure_filename(file.filename)
  1. Изменение размера изображений (thumbnails): Для создания превью используйте библиотеку типа Pillow.
  2. Удаление изображений: При удалении записи из БД не забудьте также удалить соответствующий файл из файловой системы.

Заключение

Для вывода изображений из базы данных в Flask:

  • Используйте хранение путей к файлам — это более эффективно.
  • Сохраняйте файлы в папку static и используйте url_for('static', ...) для генерации ссылок в HTML.
  • Если вы все же храните данные в БД (BLOB), создайте специальный маршрут, который возвращает бинарные данные с правильным Content-Type.

Представленный код является рабочим примером, который вы можете расширять и дорабатывать под свои нужды.