Can't render html image

Dash Python
1

I must be missing something very obvious as I can’t render an image in a dag cell using html:

from dash import Dash, html
import dash_ag_grid as dag

grid = dag.AgGrid(
   id = 'grid',
   rowData = [{'img_html':'<img src="https://dash.plotly.com/assets/images/plotly_logo_dark.png" />'}],
   columnDefs=[
      {'field': 'img_html', 'headerName': 'Image', 'filter': False,},
   ],
   columnSize = 'autoSize',
   dangerously_allow_code=True
)
app = Dash(__name__,)
app.layout = [html.Div([grid]),]
if __name__ == '__main__':
    app.run(debug=True)

Output:

image

What am I missing?

2

Hi @clodoaldo

Main thing missing is adding cellRenderer="markdown" to the columnDefs. Depending on your image you may also need to size it correctly . Here is an complete example:


from dash import Dash, html
import dash_ag_grid as dag

grid = dag.AgGrid(
   id = 'grid',
    rowData = [{
        'img_html': '<img src="https://dash.plotly.com/assets/images/plotly_logo_light.png" style="max-width:100%; height:auto;" />'
    }],

   columnDefs=[
      {'field': 'img_html', 'headerName': 'Image', 'filter': False, 'cellRenderer': 'markdown'},
   ],
   columnSize = 'autoSize',
   dangerously_allow_code=True
)
app = Dash(__name__,)
app.layout = [html.Div([grid]),]
if __name__ == '__main__':
    app.run(debug=True)

image
image384×306 5.16 KB