Flask传参至HTML后，如何根据变量值条件显示图片？

核心问题解答 #

HTML本身是静态标记语言，没有内置的逻辑判断能力，没法直接写if这类条件分支代码实现需求。

最优实现方案 #

用Flask自带的Jinja2模板引擎处理逻辑是最优解——这完全贴合Flask的开发流程，后端渲染时直接完成条件判断，前端拿到的就是最终渲染好的HTML内容，既没有额外的前端逻辑开销，也能避免变量暴露的风险。

示例代码

1. Flask后端代码（传入变量）

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    # 模拟业务逻辑生成的变量fkdr
    fkdr = 0.8
    # 将变量传入模板
    return render_template('index.html', fkdr=fkdr)

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

2. HTML模板代码（templates/index.html）

<!DOCTYPE html>
<html>
<head>
    <title>条件展示图片</title>
</head>
<body>
    <!-- 用Jinja2的if语法实现条件判断 -->
    {% if fkdr < 1 %}
        <img src="image.png" width="250" height="250">
    {% else %}
        <!-- 可以添加不满足条件时的备选内容 -->
        <img src="default_image.png" width="250" height="250">
    {% endif %}
</body>
</html>

补充说明 #

Jinja2用{% %}包裹控制语句（比如if、for），{{ }}用于输出变量，完全能满足各类条件判断需求。如果非要用前端JS实现，也可以通过隐藏变量+JS判断完成，但会存在变量暴露、页面加载时图片闪烁的问题，远不如后端模板处理稳妥。

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