亲爱的读者们,
我想在由一些JS代码生成的Python Dash页面上显示一个图像。请参见此处的说明:https://www.altmetric.com/assets/Getting_Started_Altmetric_Badges.pdf。在静态HTML页面中,可以包含以下脚本
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
此DIV将显示图像:
<div class='altmetric-embed' data-badge-type='donut' data-doi="10.1038/nature.2012.9872"></div>
我试图在Dash中实现这一点,但即使在图像/徽章显示后也无法实现。我尝试了几种注入te DIV的选项(使用dash_dangerously_set_inner_html.dangerouslySetinerHTML()或使用“**{”)的DIV属性,并包括脚本(在var index_字符串的自定义头中,作为html.SCRIPT(),作为外部_脚本,以及选项SERVICE_LOCAL=False/True),但似乎都不起作用。值得一提的是Dash为我提供了一个只有“Hello World”字符串但没有任何图像的页面。但当我将生成的HTML代码本地存储到HTML文件并在浏览器中打开它时,图像就会显示出来
Localhost给了我: this view,而同一页在本地给出:this view
请参阅包含的(最小)非工作示例
有什么建议吗
亲切问候,, 伊沃布
#SEE: https://www.altmetric.com/assets/Getting_Started_Altmetric_Badges.pdf
import dash
import dash_dangerously_set_inner_html
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
external_scripts = ['https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js']
app = dash.Dash(__name__, external_scripts=external_scripts, external_stylesheets=external_stylesheets)
app.css.config.serve_locally = False
app.scripts.config.serve_locally = False
app.index_string = '''
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>
{%metas%}
<title>{%title%}</title>
{%favicon%}
{%css%}
</head>
<body>
<div>My Custom header</div>
{%app_entry%}
<footer>
{%config%}
{%scripts%}
{%renderer%}
</footer>
<div>My Custom footer</div>
</body>
</html>
'''
app.layout = html.Div([
html.Script(src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'),
html.Div('Hello world'),
html.Div(dash_dangerously_set_inner_html.DangerouslySetInnerHTML("<div class='altmetric-embed' data-badge-type='donut' data-doi='10.1038/nature.2012.9872'></div>")),
html.Div(className='altmetric-embed', **{'data-badge-type' : 'donut', 'data-doi' : '10.1038/nature.2012.9872'})
])
if __name__ == '__main__':
app.run_server(debug=True)
问题是Dash还没有完成
altmetric
div的渲染,所以脚本没有对它执行操作如果你把
在
index_string
的主体内,您会注意到徽章确实出现了如果您想让dash布局中的div与脚本一起工作,可以使用以下命令 dash_defer_js_import延迟altmetric脚本的执行
您可以通过以下方式安装它:
然后像这样使用它:
为了更好地理解这个
Import
组件在做什么,您可以查看源代码here相关问题 更多 >
编程相关推荐