Bokeh图表无法在浏览器渲染问题求助

嘿，这个问题我之前也碰到过，核心原因是Flask的自动HTML转义机制在起作用！

你看，Flask为了防止XSS攻击，默认会把模板变量中的HTML特殊字符（比如<、>）转义成实体字符（比如<、>）。所以你传入的the_script和the_div里的标签都被转义了，浏览器自然就把它们当成纯文本显示，而不是解析成可执行的脚本和DOM元素。

快速修复方法（模板层面） #

直接在模板里给变量加上|safe过滤器，告诉Flask这段内容是安全的，不需要转义：

{% block content %}
<div class="container">
{{ the_script|safe }}
{{ the_div|safe }}
</div>
{% endblock %}

另一种方法（后端层面） #

如果你更习惯在后端处理，可以导入markupsafe库的Markup类，把生成的script和div包装后再传入模板：

from markupsafe import Markup
# ... 你的Bokeh图表生成代码 ...
script, div = components(plot)
return render_template('results.html', the_div=Markup(div), the_script=Markup(script))

额外小问题提醒 #

顺便提一下，你模板的metas块里有个明显的语法错误：

</mysite/static/favicon-96x96.png">

这应该是一个未写完的favicon链接，正确的写法应该是：

<link rel="icon" href="{{ url_for('static', filename='favicon-96x96.png') }}">

虽然这个错误不会直接导致图表不渲染，但还是建议修正它，避免影响页面的其他功能~

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