Render Many Images with dbc.Carousel in Dash app

I have a large file of images I will like to display and eventually filter on (with callback) using dbc.Carousel. Currently, I cannot get the images to display on the local test server (127.0.0.1) - I either get a no image sliding thumbnail placeholder or nothing.

So I have:

# local path imagePath = r"C:\Users\asdean\Documents\TagOCR\assets\\" # string list of file names... 1-image.jpg, 2-image.jpg, etc list_of_images = [os.path.basename(x) for x in glob.glob('{}*.jpg'.format(imagePath))] # encoded list of bytes of images... used this before in Dash, will explain more encodedList = [base64.b64encode(open(imagePath + i, 'rb').read()) for i in list_of_images] 

Now to render the images on the dbc.Carousel I have tried several different things...

First, a direct copy on what they suggest on

dbc.Carousel(, items = [ {'key': "2", "src": r"C:\Users\asdean\Documents\TagOCR\assets\1-1spot-cam-ptz.jpg"} ], controls=True, indicators=True, interval=None, ), 

Yields 'no image thumbnail'

But really following the docs directly does me no good as I am pulling from a file with large (and growing) number of images. List/Dict comprehensions I suspect will likely have to be used.

So, I tried something like:

dbc.Carousel(, items = [ {'key': i, 'src'} for i in list_of_images ], controls=True, indicators=True, interval=None, ), 

Which gave me the blank thumbnail, BUT I could rotate through to other blank thumbnails. From there, I remembered using an encode and decode combo to rending a single image in the past. So, I am things like (but not limited to)...

dbc.Carousel(, items = [ {'key': x} x.decode('utf-8') for x in encodedList ], controls=True, indicators=True, interval=None, ), 

Which had yielded nothing. What am I missing here? How can I display many images from a file of images to a dbc.Carousel?

Note: I have no built any callbacks for this yet. I am planning on building one that filters images by start text (pseudo code: if imageName.startswith("1-") filter on 1) Not as concerned about this right now, mainly want to know how I can display many images from a file, but if you have it, go for it.

Thanks

1 Answer

This ended up being what worked

 dbc.Carousel(, items = [ {'src':'data:image/jpg;base64,{}'.format(x.decode())} for x in encodedList ], controls=True, indicators=True, interval=None, ),