Question

我正在使用Flask创建一个Web应用程序。我创建了以下函数来动态呈现不同颜色的SVG图标。

所有测试均在Mac OSX上的最新Google 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中放置错误链接一样。

我需要做些什么才能让这张图片正确显示？

Answer 1

我在这个问题上点击“提交”之前就找到了答案，所以我想我会把答案放在这里。

我需要设置响应的mime类型。我将testicon功能更改为：

@app.route("/testicon")
def testicon():
    response = make_response(render_template("icons/test.svg", primary="ff0000"))
    response.mimetype = "image/svg+xml"
    return response

现在它完美无缺。

嵌入HTML时，SVG不显示。显示就好了

1 个答案: