I'm trying to embed an image (logo) in a Plotly plot and then export it to HTML, keeping the logo in the image. I've run into some weird behavior.
If I do it like this
x = [1,2,3,4]
y = [3,4,8,2]
fig = px.scatter(x,y)
fig.add_layout_image(
dict(
source="https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/vox.png",
xref="paper", yref="paper",
x=0.5, y=0.5,
sizex=0.4, sizey=0.4,
xanchor="right", yanchor="bottom"
)
)
fig.write_html('test.html')
it exports just fine and the image appears in the exported html.
If instead I use a local image:
x = [1,2,3,4]
y = [3,4,8,2]
fig = px.scatter(x,y)
fig.add_layout_image(
dict(
source='vox.png',
xref="paper", yref="paper",
x=0.5, y=0.5,
sizex=0.4, sizey=0.4,
xanchor="right", yanchor="bottom"
)
)
fig.write_html('test.html')
The exported HTML does not include the image (but the figure in Jupyter notebook does!).
If I look at the resulting HTML, it looks like it embeds the image as base64:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQMAAADCCAYAAABNEq...Z0DbwjH4AAAAASUVORK5CYII=
Shouldn't it be able to do that with a local image without an issue?
Additionally if I use a different URL that I host that works just fine from a browser, the image doesn't appear at all (Jupyter or HTML), but there are no exceptions thrown. It just silently fails.
Anyone know what is going on here?
