Images in Jupyter Notebooks, in Every Way
This notebook uses images in every possible way.
Note: images not displayed are due to a bug in my host Railway's caching. That is unrelated to the bug in Jupyter Notebook caching described in this notebook.
```python
from fasthtml.common import *
from IPython.display import Image
from IPython.core.display import HTML
```
## Image from `IPython.display`
This works well, but if the image later changes, it doesn't update:
```python
Image(url="https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp", width=300, height=171)
```
```python
Image(url="https://audreyfeldroy.github.io/arg-blog-images/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:
```python
%%html
<img src="https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp" width="150" height="85" />
```
## HTML Image Cache Busting
Let's try busting its image cache:
```python
%%html
<img src="https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp?t=4534" width="150" height="85" />
```
This still shows the old version:
```python
%%html
<img src="https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp" width="150" height="85" />
```
## Markdown Image Embedded in Notebook
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:
``
## Markdown Image From Local Dir in Repo
Here I use Markdown to show an image from the img directory of this repo, like this:
``
## No Markdown Remote URL to Image
Markdown with a remote image URL doesn't seem to work. Maybe I'm doing it wrong:
`![title]("https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp")`
![title]("https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp")
Here I use the `Img` FastTag from FastHTML:
```python
i = Img(src="https://audreyfeldroy.github.io/arg-blog-images/2024-12-30-Images-in-Jupyter-Notebooks.webp?t=312")
i
```
I call `show` to display a FastTag in a notebook:
```python
show(i)
```
If you're as fascinated by 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?](https://stackoverflow.com/q/32370281/271697)