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 https://dash-bootstrap-components.opensource.faculty.ai/docs/components/carousel/

dbc.Carousel(
    id="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(
        id="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(
        id="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

This ended up being what worked

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