我正在使用Flask制作一个web应用程序。我创建了以下函数来动态渲染具有不同颜色的SVG图标。
所有测试都是在Mac OSX上的最新谷歌Chrome中完成的。
@app.route("/testicon")
def testicon():
return render_template("icons/test.svg", primary="ff0000")
(显然，primary参数在实践中没有硬编码。这只是一个演示)
此函数呈现以下SVG文件：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
height="150"
width="150">
<path
id="path3800" class="icon-primary"
d="m 32.745902,139.71585 -0.385246,-80.002735 31.333333,-41.349727 z"
style="fill:#{{ primary }};stroke:none;" />
</svg>
(再次，这是简化的演示。)
当我启动Flask服务器并访问localhost:5000/testicon时，SVG会完全显示出来。然而，我创建了以下功能和附带的模板：
@app.route("/test")
def test():
return render_template("test.html")
test.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="{{ url_for('gameplay.testicon') }}" height="300px" width="300px">
</body>
</html>
访问localhost:5000/test时，没有显示任何内容。我可以检查img元素，发现它的src属性实际上是/testicon，但SVG不显示。而是显示标准的"找不到图像"图标。然而，我可以右键单击它并选择"在新选项卡中打开图像"，图像再次显示得很好。谷歌Chrome控制台没有显示任何错误，就像我在图片的src中放了一个坏链接一样。
我必须做些什么才能使此图像正确显示？
我在这个问题上点击"提交"前不久就找到了答案，所以我想我会把答案放在这里。
我需要设置响应的mime类型。我把我的testicon函数改为：
@app.route("/testicon")
def testicon():
response = make_response(render_template("icons/test.svg", primary="ff0000"))
response.mimetype = "image/svg+xml"
return response
现在它工作得很好。