I would like to add an image in a rich text component using a slot, but the image doesn’t appear.
If I add the image just using
self.rich_text.add_component(Image(source=img))
then it adds the image nicely to the bottom of the rich text.
But I would like it to be in the middle of some text. To do this the documentation says I can use a slot along the lines of
self.rich_text.content='Hello {slot0} there'
self.rich_text.add_component(Image(source=img),slot='slot0')
or
self.rich_text.content='Hello {slot0} there'
self.rich_text.data({'slot0':Image(source=img)})
But in both cases, there’s just a blank space and the image doesn’t show up.
Any ideas of how to fix this?
Are slots explicitly enabled?
yes, the check box is checked.
I kind of got around it:
self.rich_text.add_component(Label(text='Hello'))
self.rich_text.add_component(Image(source=img))
self.rich_text.add_component(Label(text='there'))
It isn’t quite perfect, but it will do for now.
I’m still interested in a proper slot solution though.
Could you create a minimal example that demonstrates the issue (and share a clone link). That way we can take a look and see if there’s a bug here that needs addressing.
When used within a slot you’ll need to set the width (and height),
it’s there it just has no width.
self.rich_text.add_component(Image(source=img, height=50), slot='slot0', width=50)
1 Like
This worked, thanks!
I would not have expected this behavior since I could add the image at the bottom of the richtext without width or height without using a slot. But problem solved.