Images in tabulator component

Anvil Q&A
#1

Thanks very much for this stu, this looks very useful.
I have strings displaying in a tabulator just fine, but images are not displaying for me.

I’m doing:
self.tabulator.columns = [
…
{‘title’:‘Image’, ‘field’:‘image’, ‘formatter’:‘image’}
]
And giving it images with type “<anvil.LazyMedia object>”, but it just displays a “broken image” icon (same as what’s displayed if the ‘image’ field is None).

Are images meant to work in a tabulator?

Tabulator - with anvil components
#2

Two approaches I’d go for.

The default tabulator 'image' formatter from tabulator takes a url.
So you might be able to get the url for each LazyMedia object.

But I’d probably go with a custom formatter

def image_formatter(row, **kws):
    return Image(source=row["image"], height=50, spacing_above="none", spacing_below="none")

self.tabulator.columns = [
      …
     {'title': 'Image', 'field':'image', 'formatter': image_formatter , 'headerSort': False, "width": 100},
]
#3

Perfect. Yes, the custom formatter works.
Thanks!

#4

Hi - could you please give a full simple example of putting a picture into a Tabulator column? I have a list of products and want to have a picture of each product in the Tabulator but still am struggling as the code above doesn’t show me precisely how* a picture might be in the dictionary of data for the tabulator. Thank you!!!