Flask第二次渲染模板时无法加载图片的原因及解决办法

• 核心为静态资源引用路径解析错误：你在模板中使用了static/js/bootstrap.min.js这类相对路径引用静态资源（图片、CSS、JS），首页路由为根路径/，相对路径会被解析为/static/xxx，和实际静态资源路径匹配，所以加载正常。
• 结果页的路由为/phish/<url>或/safe/<url>，页面实际访问URL为类似/safe/xxx的二级路径，此时相对路径会被错误解析为/safe/static/xxx，该路径不存在，导致静态资源（含图片）全部加载失败。

按优先级推荐以下方法：

1. 所有静态资源统一使用url_for生成路径
   你当前模板中CSS已经正确使用了{{ url_for('static', filename='css/main.css') }}的写法，只需要把剩余的静态资源（JS、图片）都改成相同格式即可，示例：

<!-- 原错误写法 -->
<script src="static/js/bootstrap.min.js"></script>
<img src="static/img/logo.png">
<!-- 修改后写法 -->
<script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
<img src="{{ url_for('static', filename='img/logo.png') }}">

这种方式生成的是绝对路径的静态资源地址，无论在哪一级路由下都可以正确访问。
2. 添加base标签固定路径基准
如果不想逐个修改资源引用，可以在所有模板的<head>标签中添加如下内容，让所有相对路径都以网站根路径为基准解析：

<base href="/">

3. 优化URL传递逻辑（可选）
   你当前手动替换URL中的/为$的操作可以省略，直接给路由参数指定path类型即可支持传递带斜杠的URL，修改路由写法：

@app.route('/phish/<path:url>')
def phish(url):
    # 不需要再做$替换逻辑，直接使用url即可
    return render_template("phish.html", url=url)

@app.route('/safe/<path:url>')
def safe(url):
    # 不需要再做$替换逻辑，直接使用url即可
    return render_template("safe.html", url=url)

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