Is there a way to create a set of images as plotly traces

Question

I'm attempting to create a series of Plotly traces where each trace is an image, thus allowing the use of of a slider to slide between them.

I've tried multiple methods and run into problems with each:

1.) Create an empty scatter plot and load background images into it. This just resulted in no images being shown and just a blank figure showing

2.) To create an go.Image figure, but all that results in 'Image has no add_trace attribute'

3.) Create a blank scatter and make each subsequent trace an Image, but i get an 'add_trace() got an unexpected keyword argument 'type'' error

Code(Method 3):

import plotly
import plotly.graph_objects as go
import plotly.express as px
import numpy as np
from PIL import Image
import os

img_width = 1600
img_height = 1600

imh=Image.open('/Users/######/Documents/Project_1/By_Hour/00_00.png',)
# Create figure
fig = go.Figure()

fig.add_trace(
    go.Scatter(
        x=[0, img_width],
        y=[0, img_height],
        mode="markers",
        marker_opacity=0
    )
)
# Add traces, one for each slider step
for step in np.arange(5):
    fig.add_trace(str(step),type='image',
                  visible = False,
                  source= imh)
                  
      



# Create and add slider
steps = []
for i in range(5):
    step = dict(
        method="animate",
        args=[{"visible": [False] * (5)},
              {"title": "Slider switched to step: " + str(i)}],  # layout attribute
    )
    step["args"][0]["visible"][i] = True  # Toggle i'th trace to "visible"
    steps.append(step)

sliders = [dict(
    active=0,
    visible=True,
    currentvalue={"prefix": "Time: "},
    pad={"t": 50},
    steps=steps
)]

fig.update_layout(
    sliders=sliders
)

fig.show()

Is there any way of loading images in such a way? Thank you for any help.

Answer 1

I found this answer that uses an animation to simulate a discrete slider.

Basically you have to load all images and its labels before creating the figure. This is a partial answer as I have not found any working examples using traces.