本文介绍一种轻量、可靠的方法，通过将 python 后端的图像路径列表安全传递至前端 javascript，并在 leaflet 中动态索引加载图像，从而实现在 flask 应用中交互式切换显微图像子集。
在构建用于显微图像分析的 Flask Web 应用时，一个常见但关键的需求是：不硬编码图像索引，而是支持运行时动态切换图像子集（如每次展示 12 张细胞图像）。你已成功实现了多图同步缩放/平移（基于 Leaflet），但卡在了“如何用变量代替 paths[0]、paths[1] 这类固定下标”的环节——这本质上是前后端数据传递与前端动态访问的协同问题。
直接在 Jinja2 模板中写 {{ paths[index] }} 是不可行的，因为 index 是前端 JS 变量，而 Jinja2 在服务端渲染时早已完成求值。正确解法是：将整个 paths 列表以 JSON 格式一次性安全注入前端，再由 JavaScript 解析并按需索引。
✅ 推荐实现步骤（简洁、安全、可扩展）
1. 后端：使用 tojson 过滤器安全序列化路径列表
在 main.py 的 render_template() 中保持原样即可（确保路径已正确 encode() 处理，避免特殊字符问题）：
@app.route('/')
def root():
path_to_images = "/mnt/nas/microscopy/cell_sets"
paths = []
for root, dirs, files in os.walk(path_to_images):
for file in files:
if any(file.lower().endswith(ext) for ext in app.config['IMAGE_EXTS']):
# 注意：使用 os.path.relpath 或统一前缀 CDN 路径，便于前端拼接
full_path = os.path.join(root, file)
# 假设静态文件服务路径为 /cdn/，则存储相对路径更安全
rel_path = os.path.relpath(full_path, start=path_to_images)
paths.append(rel_path) # 不要 encode() 成乱码，除非有特殊需求
return render_template('index.html', paths=paths)⚠️ 注意：encode() 在原始代码中可能引入不必要的 URL 编码（如空格变 %20），若静态资源路由 /cdn/ 直接映射到 NAS 目录，请传入标准 Unix 风格相对路径（如 "set_A/001.tif"），由前端拼接 'cdn/' + path 即可。
2. 前端：在 index.html 中安全注入并解析路径数组
在
