Da sh Python - использование внешнего Javascript для отображения изображения - PullRequest
Новая
       6

Da sh Python - использование внешнего Javascript для отображения изображения

0 голосов
/ 03 апреля 2020

Уважаемые читатели,

Я хочу отобразить изображение на странице Python Da sh, которое генерируется некоторым кодом JS. См. Описание здесь: https://www.altmetric.com/assets/Getting_Started_Altmetric_Badges.pdf. На странице c 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>

Я пытаюсь заставить это работать в Da sh но ни разу не показывалось изображение / значок. Я попробовал несколько вариантов внедрения te DIV (с помощью dash_dangerously_set_inner_ html .DangerouslySetInner HTML () или с атрибутами DIV с использованием '** {'), и включив SCRIPT (в пользовательский заголовок переменной var index_string, как Html .Script (), как external_scripts и с параметрами serve_locally = False / True), но, похоже, ни один из них не работает. Хорошо отметить, что Da sh предоставляет мне страницу только со строкой «Hello World», но без каких-либо изображений. Но когда я локально сохраняю сгенерированный код HTML в файл HTML и открываю его в своем браузере, изображения отображаются!

Localhost дает мне: это представление , тогда как эта же страница дает мне локально: это представление

См. включенный (минимальный) нерабочий пример.

Любые предложения здесь?

С уважением, IvoB 

#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)
...