'How to display multiple images with a loop with python dash

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.



Solution 1:[1]

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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Artemiy Rodionov