How insert img href inside a dash datatable


I need to replace a URL column in dash datatable by a cliokable logo photo that redirects me to that URL. Can you advise on how to integrate a href image into dash datatable cell?

1 Like

There will be probably more knowledgeable people with respect to dash_table, but if you are looking for a simple table without all the shebangs, then you can consider dbc.Table() or html.Table() that allow you to compose your cells as you want (including a link as img). That’s what I did when I needed it.

Or you can try this approach with Markdown

1 Like

@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](]("
montreal = "[![Montreal](]("
nyc = "[![New York City](]("


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

img[src*="#thumbnail"] {

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

app.layout = html.Div(
                {"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__":


Thank you @AnnMarieW This works perfectly.

1 Like

Thanks for the suggestions.

1 Like