Plotting Images inside a data frame cell

[aakashsantuka]

Environment

• Operating System: Windows 10
• Python Version: $ python --version
• How did you install Qgrid: (pip, conda, or other (please explain)): conda
• Python packages: $ pip freeze or $ conda list (please include qgrid, notebook, and jupyterlab versions)
• Jupyter lab packages (if applicable): $ jupyter labextension list

Description of Issue

I am working with a dataframe which also has images in it as a separate column. To view these images I use HTML function and pass appropriate 'formatter' to display the image.

How do I display an image inside a qgrid data frame?

• What happened instead?

Reproduction Steps

...

What steps have you taken to resolve this already?

I tried the HTML command with the qgrid data frame but it gave me an error "data_frame must be DataFrame or Series, not <class 'IPython.core.display.HTML'>" ...

Anything else?

...

[aakashsantuka]

Anyone faced a similar issue before?

[slanj]

Hi! I have faced with similar problem and proposed possible decision in my article https://medium.com/analytics-vidhya/label-images-dataset-in-jupyter-notebook-1081b185db4a .

In short, just use this snippet to display images from folder images/ in column image

from IPython.display import Javascript, HTML
display(Javascript("""\
window.slick_grid.setColumns(window.slick_grid.getColumns().map(x => {
    if (x.id === 'image') {
        x.formatter = (r, c, v, cd, dc) =>
        (v = "<img src = images/" + v + "></img>");
    }
    return x
}));
"""))

[ijzepeda]

hey @slanj you saved me a lot of trouble! It works like charm!

I just have one question, is it possible to avoid reloading the image every time I scroll!?

[mattans]

Hi! I have faced with similar problem and proposed possible decision in my article https://medium.com/analytics-vidhya/label-images-dataset-in-jupyter-notebook-1081b185db4a .

In short, just use this snippet to display images from folder images/ in column image

from IPython.display import Javascript, HTML
display(Javascript("""\
window.slick_grid.setColumns(window.slick_grid.getColumns().map(x => {
    if (x.id === 'image') {
        x.formatter = (r, c, v, cd, dc) =>
        (v = "<img src = images/" + v + "></img>");
    }
    return x
}));
"""))

Hi, it seems rendering images with JS is blocked on my notebook.

This is what my notebook shows:

When I check the images' URL, it's "about:blank#blocked"

How can I resolve this?