如何在Flask网站中加载SVG图片？现有显示异常问题求助

看了你的代码，发现几个关键小问题，导致SVG没法正常显示，咱们一步步来修复：

1. 静态文件URL生成逻辑错了！ #

你在HTML里写的url_for('static', filename='data:image/svg+xml' + name)完全搞反了逻辑——filename参数应该是静态文件夹里SVG文件的相对路径，而不是直接拼Data URI前缀。url_for('static')会自动帮你生成指向静态文件夹的正确URL，Flask也会自动识别SVG的MIME类型，不需要手动加data:image/svg+xml。

2. 全局变量搞乱了文件列表 #

你把listo2设成了全局变量，每次刷新首页都会往里面追加文件名，几次刷新后列表里全是重复的内容，数据直接乱掉啦。得把列表初始化放在home视图函数里面，每次请求都重新生成干净的列表。

3. 找错了SVG文件的存放目录 #

os.getcwd()拿的是当前工作目录，但Flask默认会从static文件夹读取静态文件（就是和你的app.py同级的那个static文件夹）。你直接遍历当前工作目录，大概率根本没找到正确的SVG文件（除非你把SVG直接扔在了项目根目录，而不是static里）。

修复后的完整代码 #

Flask应用代码（app.py） #

from flask import Flask, render_template
import os

app = Flask(__name__)

@app.route("/")
def home():
    # 每次请求都重新初始化列表，避免重复数据
    svg_files = []
    # 获取Flask默认的静态文件夹路径，不用自己瞎猜
    static_folder = app.static_folder
    # 遍历静态文件夹下的所有SVG文件
    for file_name in os.listdir(static_folder):
        if file_name.endswith(".svg"):
            svg_files.append(file_name)
    # 把文件名和文件名配对（你原来的zip逻辑不变）
    file_pairs = zip(svg_files, svg_files)
    return render_template("templates.html", zipp=file_pairs)

if __name__ == "__main__":
    app.run(debug=True)  # 开启debug模式，方便排查错误

HTML模板代码（templates/templates.html） #

<html>
<body>
    {% for svg_name, display_name in zipp %}
        <!-- 正确生成静态文件URL，alt属性加上文件名方便访问性 -->
        <img src="{{ url_for('static', filename=svg_name) }}" alt="{{ display_name }}">
        <p>{{ display_name }}</p>
    {% endfor %}
</body>
</html>

最后要注意的小细节 #

• 先确认你的SVG文件都放在了static文件夹里！如果还没这个文件夹，直接在app.py同级目录新建一个叫static的文件夹，把所有SVG放进去就行。
• 如果你的SVG放在了自定义的文件夹里，初始化Flask app的时候可以指定：app = Flask(__name__, static_folder="你的自定义文件夹路径")。
• 开启debug模式后，要是静态文件找不到，Flask会在控制台输出明确的错误信息，方便你快速定位问题。

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