如何在 Flask 应用程序中一次获取多个图像？

Question

我正在编写一个小型 Flask Web 应用程序。一页在网格中显示 36 个不同的图像（非常小的图像，20x20 像素，全部低于 300 字节）。这些图像存储在

static/images

下，并命名为

clue0.png, clue1.png, ..., clue35.png

。

我目前正在 Jinja 文件中使用循环加载它们：

<div class="grid-container">
    {% for n in range(36) %}
    <div class="help-item">
        <img src="{{ url_for('static', filename='images/clue' ~ n ~ '.png') }}">
    </div>
    {% endfor %}
</div>

虽然这有效，但感觉非常低效：必须单独获取每个图像，如日志中所示：

127.0.0.1 - - [10/May/2024 16:38:01] "GET /static/images/clue0.png HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2024 16:38:01] "GET /static/images/clue1.png HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2024 16:38:01] "GET /static/images/clue3.png HTTP/1.1" 304 -
...
127.0.0.1 - - [10/May/2024 16:38:01] "GET /static/images/clue35.png HTTP/1.1" 304 -

此外，这意味着加载此页面一次至少会向网站发出 36 个请求，这可能会产生很大的问题，因为大多数托管解决方案都会限制对其免费套餐的网站调用次数。

有更聪明的方法吗？理想情况下，我想在页面加载时发出一个请求，立即获取所有图像。

我考虑过将图像托管在另一个网站（例如 imgur）上，但我宁愿将所有内容保留在项目代码库中，而且我觉得有一种更好的方法可以一次显示多个小图像，而无需发出大量请求。

Answer 1

使用类似于 @Detlef 建议的想法，我将所有图像合并到单个精灵图像中。然后我使用这张图片作为所有 div 的背景：

.help-item {
    background-image: url("{{ url_for('static', filename='images/clues.png') }}");
}

我使用背景位置和背景大小来缩放并仅显示每个 div 所需的图像部分。

html：

<div class="grid-container">
    {% for n in range(36) %}
    <div class="help-item col{{ n % 6}} row{{n // 6}}"></div>
    {% endfor %}
</div>

css：

.help-item {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
    background-size: 600%;
}

.col0 {background-position-x: 0px;}
.col1 {background-position-x: -78px;}
...
.col5 {background-position-x: -390px;}

.row0 {background-position-y: 0px;}
.row1 {background-position-y: -78px;}
...
.row5 {background-position-y: -390px;}

页面现在只需要一次get请求即可获取所有图片！