Flask部署Folium地图：解决Plotly HTML弹窗404错误问题

问题根源 #

本地运行时直接引用本地文件路径即可访问，但Flask作为Web服务器，仅会识别指定静态目录（默认是static文件夹）下的资源，未配置的外部路径或本地绝对路径会返回404。

正确实现步骤 #

1. 调整项目文件结构 #

将所有Plotly生成的HTML图表文件统一放到Flask项目的static目录下，建议新建子目录归类，比如static/plotly_charts：

your_flask_project/
├── app.py
├── templates/
│   └── map.html  # 存放Folium生成的地图页面
└── static/
    └── plotly_charts/
        ├── chart_01.html
        ├── chart_02.html
        └── ...

2. 修改弹窗生成逻辑 #

生成Folium标记弹窗时，弃用本地路径，改用Flask静态文件的URL路径（格式：/static/plotly_charts/[文件名].html）：

import folium
import plotly.express as px

# 示例：生成Plotly图表并保存到静态目录
fig = px.bar(df, x="region", y="count")
chart_filename = f"chart_{row['id']}.html"
save_path = f"static/plotly_charts/{chart_filename}"
fig.write_html(save_path)

# 创建弹窗，引用静态资源URL
popup = folium.Popup(
    folium.IFrame(src=f"/static/plotly_charts/{chart_filename}",
                  width=600, height=450),
    max_width=600
)
folium.Marker(location=[row['lat'], row['lon']], popup=popup).add_to(map)

3. 规范Flask路由配置 #

确保Flask应用正确渲染地图页面，静态资源访问无需额外配置（Flask默认已处理static目录）：

from flask import Flask, render_template
import folium

app = Flask(__name__)

@app.route('/')
def show_map():
    # 初始化地图
    map_obj = folium.Map(location=[39.9042, 116.4074], zoom_start=10)
    # ... 批量生成标记和弹窗的逻辑 ...
    # 将地图保存到templates目录后渲染
    map_obj.save('templates/map.html')
    return render_template('map.html')

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

4. 关键注意事项 #

• 禁止使用本地绝对路径（如D:/projects/chart.html），Flask服务器无法识别这类路径。
• 确保图表文件的保存路径与弹窗引用的URL路径完全匹配，比如保存到static/plotly_charts/a.html，引用时必须用/static/plotly_charts/a.html。
• 若自定义了静态目录，需在Flask初始化时指定：app = Flask(__name__, static_folder='my_static')，对应URL路径改为/my_static/plotly_charts/xxx.html。

验证方法 #

启动Flask服务后，访问地图页面，点击标记点，弹窗应正常加载Plotly图表，无404报错。

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