Embed image as plot background

Dash Python
1

Hello,
I’m currently working on an app that plots a networkx graph with dash, following the template found here. I then want to put an image below the graph, acting as a map of sorts, with the graph over it showing possible routes.

My code looks like this:

fig = go.Figure(data=[edge_trace, sel_edge_trace, node_trace],
             layout=go.Layout(
                showlegend=False,
                margin=dict(b=20,l=5,r=5,t=40),
                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False))
                )
...
fig.add_layout_image(dict(
                        source="/assets/cinci.png",
                        xref="x",
                        yref="y",
                        x=50,
                        y=50,
                        xanchor="center",
                        sizex=50,
                        sizey=50,
                        sizing="stretch",
                        opacity=0.5,
                        layer="below"))

but no image is showing on my page. I tried toying around with some of the values, since the image might just be offscreen, but I don’t really understand why it’s not showing up. Could someone help me understand why the image is not showing and how I could keep it in place below my graph?

Adding the same image with the same source path with html.Img works just fine.

Thanks!

2

Hi @merlo and welcome to the plotly community!

When using a local image file, use the Pillow library to read the image.

from PIL import Image

#storing in a variable to pass into the source
img = Image.open("/assets/image.png")

fig = go.Figure(data=[edge_trace, sel_edge_trace, node_trace],
             layout=go.Layout(
                showlegend=False,
                margin=dict(b=20,l=5,r=5,t=40),
                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False))
                )
...
fig.add_layout_image(dict(
                        source=img,
                        xref="x",
                        yref="y",
                        x=50,
                        y=50,
                        xanchor="center",
                        sizex=50,
                        sizey=50,
                        sizing="stretch",
                        opacity=0.5,
                        layer="below"))
1 Like
3

Hi,
thanks for the reply! Unfortunately that didn’t work, but I should also add that using a remote URL for an image isn’t working either. I suspect the problem is more tied in the size/coordinates and the image being too small or off screen? I have no idea how to check that or how to play with the parameters though.
Please let me know if there’s any more additional information I can provide
Thanks!