29

I've been trying to display a gif in Jupyter notebook and have had some trouble. I keep getting a blank image file.

I've tried using html from this GitHub repository. 

![wignerfunction][1](../gifs/wigner_rotation_animate.gif "wigner")

And

from IPython.display import Image
Image(url='example.gif')

None of the above have worked so far.

Thanks

Engineero
  • 12,340
  • 5
  • 53
  • 75
iiooii
  • 551
  • 2
  • 9
  • 15
  • What is the GIF filename, and where does it exist on disk? Have you given the full path rather than a relative one? – OneCricketeer Jul 25 '18 at 21:28
  • filename is : wigner_rotation_animate.gif – iiooii Jul 25 '18 at 21:29
  • I gave the filepath: that would be Users/username/Downloads/file/filename.gif – iiooii Jul 25 '18 at 21:30
  • This looks like relative path on mac. Try making it absolute by prepending slash? – Const Jul 25 '18 at 21:35
  • Try it without the `[1]`, so `![wignerfunction](../gifs/wigner_rotation_animate.gif "wigner")` – Engineero Jul 25 '18 at 21:36
  • Also, I would build my path with [`os.path`](https://docs.python.org/3/library/os.path.html) instead. Try `path = os.path.abspath('../gifs/wigner_rotation_animate.gif')` and then `![wignerfunction](path)`. – Engineero Jul 25 '18 at 21:37
  • I still got a blank image. Thanks for the help btw – iiooii Jul 25 '18 at 21:44
  • Possible duplicate of [How to Include image or picture in jupyter notebook](https://stackoverflow.com/questions/32370281/how-to-include-image-or-picture-in-jupyter-notebook) – Reblochon Masque Jul 25 '18 at 21:49
  • `from IPython import display` then, `display.Image(r"C:/Users/username/Downloads/giphy.gif")` in a normal `code` cell should also work. – Laenka-Oss Jul 30 '22 at 21:46

7 Answers7

37

I've been trying to display a gif in Jupyter notebook and have had some trouble.

To display gif in notebook you can use inline markup on a Markdown cell like this:

  • Relative reference in the same folder as ipynb notebook file:

    ![SegmentLocal](191px-Seven_segment_display-animated.gif "segment")

  • Relative reference in subfolder images from folder where ipynb notebook file is:

    ![SegmentLocal](images/191px-Seven_segment_display-animated.gif "segment")

  • Absolute reference from root folder irrespective of location of notebook file:

    ![SegmentLocal](/Users/username/some-folder/191px-Seven_segment_display-animated.gif "segment")

  • URL reference (should work out of the box in your notebook):

    ![ChessUrl](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif "chess")

As an example, since stack overflow is also using markdown, last line with url reference if given exactly last mentioned line: ![ChessUrl](https://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif "chess"), but not given as code reference evaluates to:

ChessUrl

As should be displayed in your jupyter notebook as well. Now, if you can see this last one ok, but can't see it from referenced local file you are most probably either having corrupted gif, permission issues or not proper file path.

Const
  • 6,237
  • 3
  • 22
  • 27
  • When I type: `![SegmentLocal](/Users/tommylees/Downloads/video2.gif "segment")` I get the following error: - `/bin/sh: -c: line 0: syntax error near unexpected token /Users/tommylees/Downloads/video2.gif` - `/bin/sh: -c: line 0: `[SegmentLocal](/Users/tommylees/Downloads/video2.gif)' ` – Tommy Lees May 31 '19 at 12:17
  • 3
    You have to set the cell type to markdown. Maybe this should be highlighted in the main comment – Matt07 May 04 '20 at 15:17
  • Um, it is literally stated in the first sentence of the answer... – Const Jun 10 '20 at 21:58
  • Is there a way to use this notation in markdown to display the gif aligned to the center, set style preferences (width etc.) instead of using IPython.display? – Slash Aug 12 '22 at 14:47
10

When I need to include a gif animation in a jupyter notebook I do the following:

<img src="FileName.gif" width="750" align="center">

The width and align parameters are defined by you.

Thanks

user13013261
  • 125
  • 1
  • 3
6

In some cases, you need to embed the gif file in Jupyter notebook, that is, the gif works in Jupyter notebook even if the gif file on your disk has been deleted. @user13013261's solution would fail, and @Const's only works in a Markdown cell.

You can try these:

display(Image(data=open(gif_path,'rb').read(), format='png'))

or

import base64
b64 = base64.b64encode(open(gif_path,'rb').read()).decode('ascii')
display(HTML(f'<img src="data:image/gif;base64,{b64}" />'))

Reference:
https://github.com/ipython/ipython/issues/10045#issuecomment-318202267 https://github.com/ipython/ipython/issues/10045#issuecomment-642640541

Lerner Zhang
  • 6,184
  • 2
  • 49
  • 66
  • This worked. The higher voted answers didn't work for me because they would load a GIF and then it would get cached and never loaded again. This was problematic because I was actually creating the gif programmatically and therefore didn't want it cached. – JnBrymn Jul 30 '22 at 18:43
  • from IPython.display import HTML – Claude COULOMBE Sep 01 '22 at 06:23
1

The only solution that worked for me to display gif images on the notebook can be found here

For external gif, you can use Jupyter's display

from IPython.display import Image
Image(url='https://upload.wikimedia.org/wikipedia/commons/e/e3/Animhorse.gif')

But for a local file, you need to read the bytes and display it.

!wget https://upload.wikimedia.org/wikipedia/commons/e/e3/Animhorse.gif
Image(open('Animhorse.gif','rb').read())

This answer from @korakot helped me a lot as I have tried every solution posted here but didn't work on my Kaggle notebook.

stic-lab
  • 433
  • 7
  • 16
0
import ipywidgets as widgets
display(widgets.HTML(f'<img src="{gif_file}" width="750" align="center">'))
Yuchao Jiang
  • 3,522
  • 30
  • 23
0

Haven't found a solution that embeds the updated GIF which is generated inside the notebook. So here is how:

Install tensorflow/docs pip install git+https://github.com/tensorflow/docs, then

import tensorflow_docs.vis.embed as embed
embed.embed_file('output.gif')
ernestchu
  • 91
  • 3
-1

Any image format either png, jpg, jpeg or gif etc, you want to show in python jupyter notebook then simply use matplotlib library.

import matplotlib.pyplot as plt

import matplotlib.image as mpimg

img = mpimg.imread("/home/gaurav/assignment/sofcomputing/river.gif")

plt.imshow(img)
Mickael B.
  • 4,755
  • 4
  • 24
  • 48
Gaurav Yadav
  • 57
  • 1
  • 4
  • 4
    That code doesn't work without `Pillow` installed. You'll get `ValueError: Only know how to handle extensions: ['png']; with Pillow installed matplotlib can handle more images` because `imread` cannot handle anything but `png` in a nascent environment. More reliable and shorter to use the standard `from IPython.display import Image;Image("/home/gaurav/assignment/sofcomputing/river.gif")` – Wayne Jan 30 '20 at 16:33
  • 1
    When I tried the Matplotlib way, the GIF was not animated. (It was drawn on an x-y axis, so I'm not surprised.) The `IPython.display.Image` way showed the GIF with animation. It should be an answer because it differs from the other answers in putting the graphic in an executable cell output, rather than Markdown. – Jim Pivarski May 31 '21 at 20:22