Serving large numbers of images

[TPreece101]

I'm looking to create a basic image browser so I need to be able to display images based on user input and there are too many images to be packed initially.

What is the best way of being able to display these images? Based on the docs the best way I can think of is by running a simple file server alongside so that I can use URLs. Is there an easier way?

Thanks in advance for your support, I love this library 😊

[FabienArcellier]

Hi @TPreece101,

Thanks for your feedback.

A way to expose image to streamsync is to read them as dataurl. To limit the number of image to read, you can use the Pagination component. (not documented, it will be fix next release)

import base64

binary_fc = open(filepath, 'rb').read() 
base64_utf8_str = base64.b64encode(binary_fc).decode('utf-8')
ext     = filepath.split('.')[-1]
dataurl = f'data:image/{ext};base64,{base64_utf8_str}'

[TPreece101]

That works beautifully, and means I can ditch my file server - thanks so much 😊

[ramedina86]

Hey @TPreece101

Packed files are usually for files that need to be generated on the fly. For example if you're implementing a gen AI for images, or applying image filters based on user input.

If you're serving static images, which you're not generating on the fly, you can just put them in the static folder, which will be served statically.

Then you can have a state element like my_img_src, an Image with a source @{my_img_src} then you can set to e.g. static/dog.jpg, static/cat.jpg etc.

Glad you love the library, means a lot!