如何修改template_vars通过Jinja2向HTML文件传入多张图片？

首先要修正你当前HTML模板的问题——现在的循环会遍历template_vars里的所有键值对，包括title，这会导致把TITLE当成图片路径渲染，出现错误。我们需要把图片相关的数据单独拆分出来，再调整模板和template_vars。

方式一：仅批量加载图片路径 #

修改后的HTML模板 #

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h2>Graphs Go Here</h2>
<div>
{% for img_path in images %}
 <img src="{{ img_path }}" alt="图表">
{% endfor %}
</div>
</body>
</html>

对应的template_vars修改 #

把图片路径放到一个列表里，通过images键传入：

template_vars = {
    "title": "TITLE",
    "images": ["obj1.png", "obj2.png", "obj3.png"]  # 这里添加所有需要加载的图片路径
}

方式二：每张图片带自定义标题 #

如果需要给每张图片添加说明标题，可以用字典列表的形式：

修改后的HTML模板 #

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>{{ title }}</title>
</head>
<body>
<h2>Graphs Go Here</h2>
<dl>
{% for img in images %}
 <dt>{{ img.title }}</dt>
 <dd><img src="{{ img.path }}" alt="{{ img.title }}"></dd>
{% endfor %}
</dl>
</body>
</html>

对应的template_vars修改 #

template_vars = {
    "title": "TITLE",
    "images": [
        {"title": "用户行为图表", "path": "obj1.png"},
        {"title": "销售数据图表", "path": "obj2.png"},
        {"title": "流量趋势图表", "path": "obj3.png"}
    ]
}

这样修改后，Jinja2就能正确遍历所有图片路径，不会把标题当成图片处理了。

内容的提问来源于stack exchange，提问作者Natasha