How insert img href inside a dash datatable

Dash Python
3

@jlfsjunior has a great suggestion, but if you would also like to use the other advanced features of the DataTable, here is an example of how to add an image as a link in a DataTable using Markdown syntax .
The link needs to be formatted like this: [![alt text](image link)](web link)

Note that you can now also use raw HTML in markdown in a datatable. See more information in the announcement here

The advantage of using the markdown syntax is that it doesn’t have the security risks like raw HTML.


import dash
import dash_html_components as html
import dash_table
import pandas as pd

app = dash.Dash(__name__)

#Markdown format for image as a link: [![alt text](image link)](web link)
seattle = "[![Seattle](https://upload.wikimedia.org/wikipedia/commons/8/80/SeattleQueenAnne2021-2.png#thumbnail)](https://en.wikipedia.org/wiki/Seattle)"
montreal = "[![Montreal](https://upload.wikimedia.org/wikipedia/commons/d/d0/Montreal_August_2017_05.jpg#thumbnail)](https://en.wikipedia.org/wiki/Montreal)"
nyc = "[![New York City](https://upload.wikimedia.org/wikipedia/commons/f/f7/Lower_Manhattan_skyline_-_June_2017.jpg#thumbnail)](https://en.wikipedia.org/wiki/New_York_City)"

"""

Use css in the assets folder to set the image size, for example:

img[src*="#thumbnail"] {
   width:200px;
   height:100px;
}
"""




df = pd.DataFrame(
    dict(
        [
            ("temperature", [13, 43, 50]),
            ("city", ["NYC", "Montreal", "Seattle"]),
            ("image", [nyc, montreal, seattle]),
        ]
    )
)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id="table-dropdown",
            data=df.to_dict("records"),
            columns=[
                {"id": "image", "name": "image", "presentation": "markdown"},
                {"id": "city", "name": "city"},
                {"id": "temperature", "name": "temperature"},
            ],
            style_cell_conditional=[{"if": {"column_id": "image"}, "width": "200px"},],
        )
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True)
2 Likes