How to insert an inline image in Google Colaboratory markdown call from local path

Question

This is not a duplicate of that post.

The original poster accepted a solution that didn't correspond exactly to his request:

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:

The solution proposed involved posting the image in a code cell.

I'm trying to see if somebody has a solution for a markdown cell.

I have noticed the markdown img tag works with a valid url, but not with a local path; Is there a way to find an equivalent url for a file path known to lead to the correct file? <h2 align="center">Image</h2> <img src="https://static1.squarespace.com/static/5150aec6e4b0e340ec52710a/t/51525c33e4b0b3e0d10f77ab/1364352052403/Data_Science_VD.png?format=250w" >works, but not with /tmp/image.png or other absolute or relative path.

Answer 1

You can put your image within here

/usr/local/share/jupyter/nbextensions/google.colab/

Then access it with path /nbextensions/google.colab/, e.g.

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

The image will be cached, so be careful about updating it.

Read more details from this snippet

Answer 2

This won't link to a local file per se, but you can convert a local file into a data url. This site will create a data url from an image, which you can use as an image url in a markdown cell.