Flask模板img的src使用变量调用url_for返回404问题排查

报错是Jinja2模板语法使用错误导致的：
{{ }}是Jinja2的表达式边界标记，一旦处于外层{{ }}包裹的表达式上下文内部，引用变量不需要、也不能再嵌套一层{{ }}。你原有写法里内层的{{ file_name }}会被直接识别为普通文本，不会做变量替换，最终URL里的花括号被编码为%7B、%7D，正好对应你报错里的/static/output/%7B%20file_name%20%7D路径，请求的是文件名字面量为{ file_name }的资源，自然返回404。

修改img标签的src写法即可，核心是在url_for的参数表达式里直接引用file_name变量拼接路径，禁止嵌套花括号，任选以下一种写法就行：

• 用+做字符串拼接，写法最直观：

<img src="{{ url_for('static', filename='output/' + file_name + '.png') }}">

• 用Jinja2原生的字符串拼接符~，会自动将操作数转为字符串，容错性更好：

<img src="{{ url_for('static', filename='output/' ~ file_name ~ '.png') }}">

• 用百分号格式化字符串：

<img src="{{ url_for('static', filename='output/%s.png' % file_name) }}">

修改后确认static/output/目录下确实存在对应文件名的png资源，清下浏览器缓存刷新页面就能正常加载。

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