Image not displaying

Hi, I am trying to display an image like this in jupyterlab where i have enabled output_notebook():

from bokeh.layouts import row
from bokeh.io import show, output_notebook
from bokeh.plotting import figure
from utils import imshow
import numpy as np, pandas as pd, json
from skimage.measure import label, regionprops_table
import cv2
from bokeh.plotting import ColumnDataSource
output_notebook()

ds = ColumnDataSource(data=dict(image=[img])) 
p = figure(x_range=(0, img.shape[1]), y_range=(0, img.shape[0]))
p.image(
    image='image', x=0, y=0, 
    dw=img.shape[1], dh=img.shape[0], 
    palette="Spectral11"
)
show(p)

However when i run the cell no image shows and i the following error in the console:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'dimension')
    at p._set_data (bokeh-3.0.3.min.js:509:2147)
    at p.set_data (bokeh-3.0.3.min.js:376:4330)
    at R.set_data (bokeh-3.0.3.min.js:372:4143)
    at R.lazy_initialize (bokeh-3.0.3.min.js:372:1824)
    at async a (bokeh-3.0.3.min.js:224:210)
    at async t.build_views (bokeh-3.0.3.min.js:224:625)
    at async _.build_renderer_views (bokeh-3.0.3.min.js:574:10203)
    at async _.lazy_initialize (bokeh-3.0.3.min.js:574:3853)
    at async a (bokeh-3.0.3.min.js:224:210)
    at async t.build_view (bokeh-3.0.3.min.js:224:315)

If i display the image directly (without using columndatasource) it works great.

Why can i not use columndatasource like this?

What exactly is img? Your example code leaves that important detail out. It should be a 2d numpy array of numbers.

Hi @Bryan, thats exactly what it is. a 2d numpy array of uint8 numbers.

@bokehcoder In that case I would need an actual complete Minimal Reproducible Example that I could run myself to reproduce and investigate. Otherwise all I can suggest is to try converting to other dtypes in case perhaps there is some specific issue with uint8.

Here is a complete reproducable example:

from bokeh.plotting import ColumnDataSource
from bokeh.io import show, output_notebook
from bokeh.plotting import figure
from utils import imshow
import numpy as np
output_notebook()
img = np.random.rand(10,10)
ds = ColumnDataSource(data=dict(image=[img])) # image=[np.flipud(img)]
p = figure(x_range=(0, img.shape[1]), y_range=(0, img.shape[0]))
p.image(
    image='image', x=0, y=0, 
    dw=img.shape[1], dh=img.shape[0], 
    palette="Spectral11"
)
show(p)

Im running it in a jupyterlab notebook

@bokehcoder you have not passed the CDS as the value of the source parameter to p.image

ugh yes… ok. Sorry about that mistake.
It works now.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.