How do I embed a gif in Jupyter notebook?
Question:
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
Answers:
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:
-
Relative reference in subfolder images from folder where ipynb notebook file is:
-
Absolute reference from root folder irrespective of location of notebook file:
-
URL reference (should work out of the box in your notebook):
As an example, since stack overflow is also using markdown, last line with url reference if given exactly last mentioned line: , but not given as code reference evaluates to:
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.
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)
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
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
import ipywidgets as widgets
display(widgets.HTML(f'<img src="{gif_file}" width="750" align="center">'))
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.
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
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:
 -
Relative reference in subfolder images from folder where ipynb notebook file is:
 -
Absolute reference from root folder irrespective of location of notebook file:
 -
URL reference (should work out of the box in your notebook):
As an example, since stack overflow is also using markdown, last line with url reference if given exactly last mentioned line: , but not given as code reference evaluates to:
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.
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)
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
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
import ipywidgets as widgets
display(widgets.HTML(f'<img src="{gif_file}" width="750" align="center">'))
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.