using locally saved PNGs in mark_image

Hello,

I’m trying to use mark_image for png’s stored locally, and I’m running into some issues.

First, if I use a remote location (using dropbox), it works fine:

url = "https://dl.dropboxusercontent.com/s/5jxbltadssmjbbwngk2/EfX_transparent.png"
df = pd.DataFrame(dict(x=[1], y=[1], url=[url]))
alt.Chart(df).mark_image().encode(x='x', y='y', url='url')

I’d rather not have to upload an image to a remote location for altair to reference it. I feel like I must be doing something wrong. Switching out the URL for a local location like url=r’my_folder/EfX_transparent.png’ doesn’t work. The chart shows up blank.

Though, it looks like something like this should work, as seen here:

So, what’s the search path for altair? Any ideas would be appreciated.

[githubbar]

You could also paste the the actual image as a base64 encoded string by opening an image inside JupyterLab, right clicking, and selecting “Copy image address”. The string will look something like this data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACsCAY...

Thank you! This is what helped to export embedded images in HTML. You can also automate it in code:

import altair as alt
import pandas as pd
from IPython.display import Image
import base64, io, IPython
from PIL import Image as PILImage

images = ["./img00.jpg", "./img01.jpg", "./img02.jpg"]
imgCode = []


for imgPath in images:
    image = PILImage.open(imgPath)
    output = io.BytesIO()    
    image.save(output, format='JPEG')
    encoded_string = "data:image/jpeg;base64,"+base64.b64encode(output.getvalue()).decode()
    imgCode.append(encoded_string)

x = [0.5, 1.5, 2.5]
y = [0.5, 1.5, 2.5]
source = pd.DataFrame({"x": x, "y": y, "img": imgCode})
alt.Chart(source).mark_image(
    width=50,
    height=50
).encode(
    x='x',
    y='y',
    url='img'
)

[joelostblom]

If anyone is looking for how to do this in JupyterLab, you need to find the image in the file browser, right click it, select “Copy download link”, and (optionally) delete any letters after your image file name so that it looks something like this: http://localhost:8888/files/your-image.png. It also seems to work with just /files/your-image.png.

You could also paste the the actual image as a base64 encoded string by opening an image inside JupyterLab, right clicking, and selecting “Copy image address”. The string will look something like this data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACsCAY...

Edit: related later SO post https://stackoverflow.com/questions/70751037/altair-tooltip-with-local-pil-image