Как исправить ошибку вывода фото из базы данных в Flask

При разработке веб-приложений на Flask разработчики часто сталкиваются с ситуацией, когда изображение успешно загружается с локального сервера, но на HTML-странице не отображается. В этой статье мы разберём типичную ошибку в коде, связанную с передачей бинарных данных изображения из базы данных SQLite, и предложим рабочее решение.

Почему фото не выводится на странице?

В предоставленном коде Flask функция get_image_from_db() возвращает сырые бинарные данные (тип bytes). В маршруте / эти данные передаются в шаблон как переменная photo_data. Однако в HTML-шаблоне вы пытаетесь использовать переменную encoded_image, которая не была передана. Это приводит к тому, что условие {% if encoded_image %} всегда ложно, и изображение не отображается.

Пошаговое исправление ошибки

1. Измените маршрут Flask

Вам нужно передать в шаблон закодированное в base64 изображение. Для этого импортируйте модуль base64 и преобразуйте бинарные данные в строку base64:

import base64
from flask import Flask, render_template
import sqlite3

app = Flask(__name__)

def get_image_from_db():
    conn = sqlite3.connect('photos.db')
    cursor = conn.cursor()
    cursor.execute('SELECT photo FROM photos')
    photo_data = cursor.fetchone()
    conn.close()
    return photo_data[0] if photo_data else None

@app.route('/')
def index():
    photo_data = get_image_from_db()
    if photo_data:
        encoded_image = base64.b64encode(photo_data).decode('utf-8')
    else:
        encoded_image = None
    return render_template('index.html', encoded_image=encoded_image)

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

2. Оставьте HTML-шаблон без изменений

Ваш HTML-шаблон уже правильно настроен для отображения base64-строки в теге <img>. Убедитесь, что переменная в шаблоне называется encoded_image, как в примере выше:

<img src="data:image/jpeg;base64,{{ encoded_image }}" alt="Photo">

Дополнительные рекомендации

• Проверьте тип изображения в БД: Убедитесь, что в базе данных хранится именно JPEG. Если формат другой (PNG, GIF), замените image/jpeg на соответствующий MIME-тип.
• Оптимизация размера: Для больших изображений используйте отдельный маршрут /photo, как в исходном коде, чтобы не нагружать HTML-страницу base64-строками.
• Обработка ошибок: Добавьте проверку на случай, если в базе данных нет записей - тогда переменная encoded_image будет None, и шаблон покажет сообщение «No photo available».

Альтернативный подход с отдельным маршрутом

Если вы предпочитаете не использовать base64, оставьте маршрут /photo, который возвращает файл изображения через send_file. В этом случае в HTML-шаблоне просто укажите путь к этому маршруту:

<img src="/photo" alt="Photo">

Этот способ более эффективен для больших файлов, так как браузер загружает изображение отдельным запросом.

Заключение

Основная причина, почему фото не отображается на странице Flask, - несоответствие имени переменной в Python-коде и в шаблоне. Используя описанные выше исправления, вы сможете успешно выводить изображения из базы данных SQLite на веб-страницу.