How can I open images in a Google Colaboratory notebook cell from uploaded png files?

Question

I am working with a Google Colaboratory notebook. I uploaded a file named bp.png into the working directory, and I can see that the file is in there by running !ls in a code cell. Then I try this piece of code to see the image in a markdown cell:

<h2 align="center">Image</h2>
<img src="bp.png" width="600">

But the Colab notebook's cell stays empty after running that (except for the header), although if I run this in a local Jupyter notebook the image does appear in the cell in that local notebook.

UPDATE:

I know I can use files uploaded to the working directory because my custom .py files that I upload, get imported to my Colab notebooks without any problems. For example, I can upload a file py_file.py and then in the Colab notebook use it as in from py_file import some_function, and it works.

Answer 1

Try this

from IPython.display import Image
Image('bp.png')

You can set width and height as well

Image("bp.png", width=100, height=100)

To display more than 1 image, you need to call display. (it’s auto for just 1 image)

from IPython.display import Image, display
display(Image('1.png'))
display(Image('2.png'))

Update jan/2019

Put your image in /usr/local/share/jupyter/nbextensions/

Then display it from /nbextensions/, e.g.

%%html
<img src='/nbextensions/image.png' />

Update feb/2022

In Google Colab, open the file browser icon (left nav bar) and navigate to usr/local/share/jupyter/nbextensions as described above. Click the ellipsis menu on the nbextensions folder > Upload and select your image to upload. Make sure to update the img tag from the code snippet above with the correct file name, and you'll want to use a code box (not text). Note that your image will be deleted from the directory when your runtime is recycled (I got a warning dialog stating so when I uploaded my image), so be careful with that.