by Audrey M. Roy Greenfeld | Mon, Dec 30, 2024
This notebook uses images in every possible way.
from fasthtml.common import * from IPython.display import Image from IPython.core.display import HTML
IPython.display
This works well, but if the image later changes, it doesn't update:
Image(url="https://audreyfeldroy.github.io/arg-static/img/2024-12-30-Images-in-Jupyter-Notebooks.webp", width=300, height=171)
Image(url="https://audreyfeldroy.github.io/arg-static/img/2024-12-30-Images-in-Jupyter-Notebooks.webp", width=150, height=85)
Interestingly this shows the old image from above rather than getting it fresh:
%%html <img src="https://audreyfeldroy.github.io/arg-static/img/2024-12-30-Images-in-Jupyter-Notebooks.webp" width="150" height="85" />
Note: I've since updated this post and don't have the old version around anymore, but the ?t=123
trick is still valid.
Let's try busting its image cache:
%%html <img src="https://audreyfeldroy.github.io/arg-static/img/2024-12-30-Images-in-Jupyter-Notebooks.webp?t=4534" width="150" height="85" />
That updated it!
This still shows the old version:
%%html <img src="https://audreyfeldroy.github.io/arg-static/img/2024-12-30-Images-in-Jupyter-Notebooks.webp" width="150" height="85" />
Create a cell, convert it to Markdown, and drag the image in. It creates a Markdown image with the image as an attachment.
The Markdown for the cell above looks like:

Here I use Markdown to show an image from the img directory of this repo, like this:

Markdown with a remote image URL doesn't seem to work:

(Message me if you know how to get that working.)
Here I use the Img
FastTag from FastHTML:
i = Img(src="https://audreyfeldroy.github.io/arg-static/img/2024-12-30-Images-in-Jupyter-Notebooks.webp?t=312") i
I call show
to display a FastTag in a notebook:
show(i)
If you're as interested in this as I am, read StackOverflow: How to embed image or picture in jupyter notebook, either from a local machine or from a web resource?