How to display multiple images with a loop with python dash

Question

I'm doing this to display multiple images with dash but it clearly isn't working as it only displays one image.

for i in images:
    app.layout = html.Div([
        html.Div([
            html.A([
                html.Img(
                    src=app.get_asset_url(i),
                    style={
                        'height' : '40%',
                        'width' : '40%',
                        'float' : 'left',
                        'position' : 'relative',
                        'padding-top' : 0,
                        'padding-right' : 0
                    }
                )
            ], href='https://www.google.com'),
        ])
    ])

What could be the easiest way to do this. Take into account these are images not plots.

Artemij Rodionov · Accepted Answer · 2019-02-06 12:40:11Z

4

I managed to make it work like this

def generate_thumbnail(image):
    return html.Div([
        html.A([
            html.Img(
                src = app.get_asset_url(i),
                style = {
                    'height': '40%',
                    'width': '40%',
                    'float': 'left',
                    'position': 'relative',
                    'padding-top': 0,
                    'padding-right': 0
                }
            )
        ], href = 'https://www.google.com'),
    ])

images_div = []
for i in images:
    images_div.append(generate_thumbnail(i))
app.layout = html.Div(images_div)

edited Feb 6, 2019 at 12:40

Artemij Rodionov

1,8261 gold badge20 silver badges23 bronze badges

answered Feb 6, 2019 at 10:42

Atirag

1,7507 gold badges36 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display multiple images with a loop with python dash

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related