如何使用flask render_template API为模板文件夹中的一个HTML模板返回多个图像

Question

我想从本地文件路径读取一些本地图像(.jpg(，然后使用flask和python3在网页(127.0.0.1:8000(上显示这些图像。我已经使用以下代码在网页上显示了单个图像：

from flask import Flask,render_template

app = Flask(__name__)


def return_img_stream(img_local_path):
import base64
img_stream = ''
with open(img_local_path, 'rb') as img_f:
img_stream = img_f.read()
img_stream = base64.b64encode(img_stream).decode()
return img_stream


@app.route('/')
def hello_world():
img_path = 'D:\1111\1.jpg'
img_stream = return_img_stream(img_path)
return render_template('index.html',img_stream=img_stream)


if __name__ == '__main__':
app.run(debug=True,host='127.0.0.1',port=8080)

我应该如何修改return_img_stream和hello_world函数以使用flask读取多图像流并将其发送到"index.html"模板？

Answer 1

编辑：

如果您在文件夹static中有图像，那么您可以只发送带有文件名的列表，并在模板中使用for循环来生成类似<img src="/static/1.jpg">的标签

@app.route('/')
def hello_world():
#filenames = os.listdir('static')
filenames = ['1.jpg', '2.jpg'] 
return render_template('index.html', filenames=filenames)

模板

{% for name in filenames %}
<img src="/static/{{ name }}">
{% endfor %}

---

如果你需要使用base64，那么你必须在Flask 中使用for循环

@app.route('/')
def hello_world():
#filenames = os.listdir('D:\1111')
#filenames = [os.path.join('D:\1111', name) for name in filenames]
filenames = ['D:\1111\1.jpg', 'D:\1111\2.jpg']
images = []
for img_path in filenames:
img_stream = return_img_stream(img_path)
images.append(img_stream)
return render_template('index.html', images=images)

模板

{% for img in images %}
<img src="data:image/jpeg;base64, {{ img }}">
{% endfor %}

---

编辑：

如果要合并所有图像以创建单个图像，则需要pillow或opencv等模块将jpg转换为原始图像，合并它们，然后将其转换回单个jpg。

---

编辑：

如果你想添加带有一些文本的图像(即带有文件名(，那么你必须创建带有(image, text)和{% for img, txt in images %}对的列表，并使用{{ txt }}放置文本

@app.route('/')
def hello_world():
#filenames = os.listdir('D:\1111')
#filenames = [os.path.join('D:\1111', name) for name in filenames]
filenames = ['D:\1111\1.jpg', 'D:\1111\2.jpg']
images = []
for img_path in filenames:
img_stream = return_img_stream(img_path)
images.append( [img_stream, img_path ])
return render_template('index.html', images=images)

模板

{% for img, txt in images %}
filename: {{ txt }}<br/>
<img src="data:image/jpeg;base64, {{ img }}">
{% endfor %}

---

但如果你指的是text on image，那么它可能需要枕头来编辑图像并在图像上添加文本
否则，您必须学习CSS才能在HTML中定位元素。

<style>
div.image { ... }
div.image span { ... }
</style>
{% for img, txt in images %}
<div class="image">
<span>filename: {{ txt }}</span>
<img src="data:image/jpeg;base64, {{ img }}">
<div>
{% endfor %}