Image not showing for Altair mark_image url

Question

I am trying to reproduce this example with my own images but the images don't show. I replaced the third image in the example with my own image that I uploaded to github in a public repository. I had previously tried with images in a google cloud storage bucket, which didn't work either. I also replaced the second image with a link to a stock image and that one works. What am I missing?

import altair as alt
import pandas as pd

source = pd.DataFrame.from_records([
      {"x": 0.5, "y": 0.5, "img": "https://vega.github.io/vega-datasets/data/ffox.png"},
      {"x": 1.5, "y": 1.5, "img": "https://media.istockphoto.com/photos/sunflower-isolated-picture-id174648035"},
      {"x": 2.5, "y": 2.5, "img": "https://github.com/flbyrne/images/blob/main/snowman.png"}
])

alt.Chart(source).mark_image(
    width=50,
    height=50
).encode(
    x='x',
    y='y',
    url='img'
)

Answer 1

You need to use the raw GitHub link (right click the image and open it in a new tab):

https://raw.githubusercontent.com/flbyrne/images/main/snowman.png

instead of

https://github.com/flbyrne/images/blob/main/snowman.png