How can I embed a component like an c.Image in a c.Table or c.Detail?

[jimkring]

I have a use case where I'd like to display images inside of table cells. Is there some Image or other base class I can use for my image data and add this as a field of my model (that I pass to c.Table or c.Detail)?

# I have an image as base64 encoded `image_data`.

# I can create an image component and use this in a `components=[]` list of a c.Div or similar.
my_image = c.Image(src=f"data:image/png;base64,{image_data}")

# I want to be able to have class where one of the fields is an image
class MyType(BaseModel):
    image: c.Image

# this didn't work
my_object1 = MyType(image = my_image)
detail1 = c.Details(data=my_object1)

# this didn't work either
my_object2 = MyType(image = f"data:image/png;base64,{image_data}")
detail2 = c.Details(data=my_object2)

Thanks!

[sydney-runkle]

Hi @jimkring,

I think this is similar to the request made in #248.

What do you think - can we close this as a duplicate?

[jimkring]

Hi @sydney-runkle,

I don't think this question is a duplicate.

The issue is basically that fastui.components render as strings when used as values of objects passed into Details and Table components.

For example, let's say I have an object with a name and an image.

from pydantic import BaseCase
import fastui.components as c

class MyType(BaseClass):
  name: str
  # let's make icon a fastui `Image` component type
  icon: c.Image

# create an instance
my_object = MyType(name="meowzer", icon=c.Image(src="image.png"))

# try to render it inside of a `Details` component.
c.Page(
  components=[
    c.Details(data=my_object)
  ]
)

This will render to something like this:

name	meowzer
icon	src: image.png, type: Image,

What I'm expecting is that I get an actual image:

name	meowzer
icon

[sydney-runkle]

Ok great, let's leave this as it's own issue then! I'll mark as an enhancement :).

[jimkring]

@sydney-runkle Yes, it would be a great enhancement. The ability to use a component as a field type of other components will be extremely powerful. Do you know where in the code components are rendered to HTML? Does this happen on the typescript side of things? Looking down into the code it seems like python is generating json which gets passed over to the UI. I could see that getting tricky in terms of doing the recursion there would sort of need to be smart recursion on both sides.