How to display a GIF in jupyter notebook using google colab?

Question

I am using google colab and would like to embed a gif. Does anyone know how to do this? I am using the code below and it is not animating the gif in the notebook. I would like the notebook to be interactive so that one can see what the code animates without having to run it.

I found many ways to do so that did not work in Google colab. The code and the GIF of interest is below.

import matplotlib.pyplot as plt
import matplotlib.image as mpimg

img = mpimg.imread("/content/animationBrownianMotion2d.gif")
plt.imshow(img)

I tried some of the solutions provided.

import IPython
from IPython.display import Image
Image(filename='/content/animationBrownianMotion2d.gif')

and similarly

import IPython
from IPython.display import Image
Image(filename='/content/animationBrownianMotion2d.gif',embed=True)

but got the error,

---------------------------------------------------------------------------
ValueError                                Traceback (most recent call last)
<ipython-input-27-56bf6cd2b134> in <module>()
      1 import IPython
      2 from IPython.display import Image
----> 3 Image(filename='/content/animationBrownianMotion2d.gif',embed=True)
      4 

/usr/local/lib/python3.6/dist-packages/IPython/core/display.py in __init__(self, data, url, filename, format, embed, width, height, retina, unconfined, metadata)
   1013 
   1014         if self.embed and self.format not in self._ACCEPTABLE_EMBEDDINGS:
-> 1015             raise ValueError("Cannot embed the '%s' image format" % (self.format))
   1016         self.width = width
   1017         self.height = height

ValueError: Cannot embed the 'gif' image format

both times.

score 26 · Accepted Answer · answered Apr 09 '20 at 04:58

26

For external gif, you can use Jupyter's display as @knoop's answer.

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())

answered Apr 09 '20 at 04:58

korakot

37,818
16
123
144

2

You can use 'filename' as a keyword-argument instead of 'url' and the same old Image method from IPython.display works like a charm :) – knoop Apr 09 '20 at 09:35
2

I tried, and it didn't. `ValueError: Cannot embed the 'gif' image format` – korakot Apr 09 '20 at 12:03
1

Turns out, you are correct. I thought my code worked because I had added the code, but forgot executing it, and saw the rendered image from previous execution. Thanks for the heads up :) – knoop Apr 09 '20 at 13:13
1

I have tried all other answers on StackOverflow but this one only works for my case. I am using Kaggle notebook and I have trouble displaying gif images. Now my problem is solved, thank you so much. – stic-lab Jan 09 '23 at 07:44

score 1 · Answer 2 · answered Apr 15 '20 at 13:41

I don't know why the above method doesn't work for me.

How to insert gif file from google drive to google colab

Step 1: Save gif in your google drive

Step 2: Ask google drive to open your file in google drive (This step is not directly related to original question.)

How to import data from google drive to google colab. Link
1. In your Google Drive (“My Drive”), create a folder called data in the location of your choosing. This is where you will upload your data.
2. From a Colab notebook, type the following:

from google.colab import drive         # tell colab to look at google drive
drive.mount('/content/drive')

The commands will bring you to a Google Authentication step. You should see a screen with Google Drive File Stream wants to access your Google Account.
After you allow permission, copy the given verification code and paste it in the box in Colab.
In the notebook, click on the charcoal > on the top left of the notebook and click on Files.
Locate the data folder you created earlier and find your data. Right-click on your data and select Copy Path. Store this copied path into a variable and you are ready to go.
Dataset is now stored in a Pandas Dataframe

Step 3:

from IPython.core.interactiveshell import InteractiveShell
InteractiveShell.ast_node_interactivity = "all"
from IPython import display

Step 4:

gifPath = Path("/content/drive/My Drive/xxxx/xxx.gif") # please paste the whole path from Step 2-6
# Display GIF in Jupyter, CoLab, IPython
with open(gifPath,'rb') as f:
    display.Image(data=f.read(), format='png')

How to display a GIF in jupyter notebook using google colab?

2 Answers2

Linked