title: Embedding Altair htmls in google sites, how to `mark_image` using private google drive links?
body: <p>I am trying to embed an interactive plot made using <code>Altair</code> into google-site. In this plot, I want to interactively display an image at a time that is stored on google-drive. When I gave this an attempt, <code>mark_image</code> failed silently, presumably because it did not read the image. This is not a surprise because google-drive images were private. With publically shared images I won't have this issue. For the purpose of this plot, I would like to keep the images private. Plus, there are a lot of images in total (~1K), so I probably should not encode them in data/bytes. I suspect that would probably make my HTML file very big and slow. Please correct me if I am wrong on this.</p>
  <p>I wonder if <code>mark_image</code> could read the images from the google-drive links, probably using a &quot;reader&quot; of some sort (an upstream JS or python library), and then feed the read image to <code>mark_image</code>. If anybody has experience with this, solutions/suggestions/workarounds would be greatly helpful.</p>
  <h4>Here's a demo code to test this:</h4>
  <p><strong>Case 1: Publically accessible image (no problem).</strong> Displayed using <code>mark_image</code>, saved in HTML format.</p>
  <pre><code>import altair as alt
  import pandas as pd
  path=&quot;https://vega.github.io/vega-datasets/data/gimp.png&quot;
  source = pd.DataFrame([{&quot;x&quot;: 0, &quot;y&quot;: 0, &quot;img&quot;: path},])
  
  chart=alt.Chart(source).mark_image(width=100,height=100,).encode(x='x',y='y',url='img')
  chart.save('test.html')
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ZVsbu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZVsbu.png" alt="enter image description here" /></a></p>
  <p>Then I embed the HTML in a google-site (private, not shared to the public), using this option <a href="https://i.stack.imgur.com/VKpfI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VKpfI.png" alt="enter image description here" /></a> and then paste the content of the HTML file in the <code>Embed code</code> tab.</p>
  <p><strong>Case 2: Image on Google-drive (problem!).</strong> The case of an image stored on google-drive (private, not shared to the public).</p>
  <pre><code># Please use the code above with `path` variable generated like this:
  file_id='' # google drive file id
  path=f&quot;https://drive.google.com/uc?export=view&amp;id={file_id}&quot;
  </code></pre>
  <p>In this case, apparently <code>mark_image</code> fails silently and the image is not shown on the plot. ​</p>