HTML дозволяє задавати зображення прямо в тегові за допомогою dataURI (зображення у вигляді base64-кодованого тексту). Виглядає це так

1
<img alt="Embedded Image" src="data:image/png;base64,iVBORw0KGgoA...">

Якщо потрібно відрендерити шаблон, який буде використовувати такі зображення на бекенді, можна використати base64 зі стандартної бібліотеки. Приклад для Flask-у (можна використати аналогічний підхід будь-де).

1
2
3
4
5
6
7
8
9
10
11
12
13
import base64
from flask import Flask, render_template

app = Flask(__name__, template_folder='.')

@app.route('/')
def hello():
    with open('image.png', 'rb') as f:
        encoded_image = base64.b64encode(f.read()).decode('utf-8')
    return render_template('template.html', image=encoded_image)

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

І сам файл шаблону template.html

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>Test embedded</title>
</head>

<body>
  <p>Image below</p>
  <img src="data:image/png;base64,{{image}}">
</body>
</html>

В результаті отримаємо сторінку з тегом зображення, яке вже вбудоване і не потребує виконання ще одного запиту до серверу.

moo

Ресурси