使用外部Javascript显示图像的Dash Python

2024-06-10 04:11:00 发布

您现在位置：Python中文网/ 问答频道 /正文
5514 3

亲爱的读者们，

我想在由一些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)

Tags： https图像divappdatahtmltypescript
1条回答
网友
1楼 · 发布于 2024-06-10 04:11:00

问题是Dash还没有完成altmetricdiv的渲染，所以脚本没有对它执行操作

如果你把

<div class='altmetric-embed' data-badge-type='donut' data-doi='10.1038/nature.2012.9872'></div>

在index_string的主体内，您会注意到徽章确实出现了

如果您想让dash布局中的div与脚本一起工作，可以使用以下命令 dash_defer_js_import延迟altmetric脚本的执行

您可以通过以下方式安装它：

pip install dash_defer_js_import

然后像这样使用它：

import dash
import dash_html_components as html
import dash_defer_js_import as dji

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            className="altmetric-embed",
            **{"data-badge-type": "donut", "data-doi": "10.1038/nature.2012.9872"}
        ),
        dji.Import(src="https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js"),
    ]
)


if __name__ == "__main__":
    app.run_server()

为了更好地理解这个Import组件在做什么，您可以查看源代码here

相关问题 更多 >

    编程相关推荐