Notebook: Displaying image data in Markdown cells does not work

[tjfulle]

In a markdown cell, displaying images as

<img src='filename.ext'>

displays the image as expected. However, displaying images as

<img src="data:image/jpeg;base64,/...2bNmzZs2f//Z">

does not display the image.

If I modify the above code and place it in a code cell as

from IPython.display import display, HTML
display(HTML('''<img src="data:image/jpeg;base64,/...2bNmzZs2f//Z">'''))

the image displays properly.

Using the middle method (<img src="data:image/jpeg;base64,/...2bNmzZs2f//Z">) would be very useful for shipping notebooks without having to include the image files.

The issue tracker does not allow uploading notebooks, but I can send a minimal working example if needed.

[takluyver]

An HTML snippet with the base64 code for a tiny image (1 pixel?) would be handy for quickly reproducing this.

When the Markdown cell is rendered, use 'inspect element' in the browser to see it's producing for the <img> tag.

[minrk]

I suspect that data-URIs are getting sanitized.

[bicubic]

This seems to be the only way of portably embedding image assets in a readable manner (i.e. not having a display(HTML()) shown to the reader just to embed a graphic.

I'd love to see this functionality supported.. Or some other, perhaps friendlier, method for creating portable notebooks with graphics assets that aren't produced from the code.

[tjfulle]

I was away for a few weeks and just got to looking at this again. The issue is reproducible with a single pixel image. Doing

display(HTML('''<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\nAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB1WlUWHRYTUw6Y29tLmFkb2Jl\nLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1Q\nIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5\nOTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91\ndD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4w\nLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAg\nICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZm\nOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0\naW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K\nAtiABQAAAAxJREFUCB1j+M/AAAADAQEAW9v5RAAAAABJRU5ErkJggg==">'''))

results in a red single pixel image. In a markdown cell, doing

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAABGdBTUEAALGPC/xhBQAAACBjSFJN\nAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB1WlUWHRYTUw6Y29tLmFkb2Jl\nLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1Q\nIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5\nOTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91\ndD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4w\nLyI+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAg\nICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZm\nOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0\naW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4K\nAtiABQAAAAxJREFUCB1j+M/AAAADAQEAW9v5RAAAAABJRU5ErkJggg==">

results in nothing. For the latter case, the browser's web inspector simply shows an empty <img> tag. Using a raw Python string for the latter case does not seem to help things. It seems to only pass the 'r' prepended to the string to the browser (if that even makes sense...)

[bicubic]

Markdown is sanitized with Caja.
I'm currently using CSS to embed image data as a workaround:

CSS:
.embed_test {
  background:       url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
  width: 16px;
  height: 16px;
  padding: 5px 0 5px 25px;
  background-size: contain;
}    

Markdown:
<div class="embed_test"></div>

This is not ideal but it works. I'd love to hear @minrk's thoughts on how media embedding may be approached in the future.

[gibiansky]

Just ran into this issue myself on 4.2 – this is quite annoying, since, as mentioned earlier, it's the only easy way to embed an image into the notebook without having anything else show up...

[tanju-b]

echoing gibiansky's comment - ver 4.2

[minrk]

Cell attachments, coming in 5.0 (https://github.com/jupyter/notebook/pull/621), allow embedding images in markdown cells. In master: Edit > Insert Image. Inline data-uris are still sanitized, though.

[Olsthoorn]

It may be simpler than thought. I ran over the same problem.
If you launch jupyter notebook, than the notebooks's launch directory becomes its root. Now if the image referred to can only be reached through directories higher upin you system directory than than this notbooks's launch directory, the notebook cannot find the image it's referring to (at least using a relative path).
It was a simple as that. Launch the notebook from a sufficiently high directory in the root of your computer, from which both the image and the notebook can be reached by only searching downward.

[parrt]

I have an image that is displayed properly locally but not when rendered from github. Has anybody run into that problem? It shows the <img ...> tag as raw text not a bad image so it ain't a directory problem.

Edit: turns out you can't use width=100. Must use style="width: 100px" and then it works.

[userqin]

When importing a local image or an image from Dropbox, how to specify the location and size of the image? For example, I want my image to be shown as a square logo on the right corner of the cell
I saw people posted an example, but this is not how I want my logo to be shown.
Thank you.

import requests
from ipywidgets import Image
Image(value=requests.get('https://octodex.github.com/images/yaktocat.png').content)

[takluyver]

AFAIK to control the styling of an image you need to generate the HTML yourself.

[mpacer]

If we were to include the pandoc feature of adding attributes after inline elements inside {} then you might be able to control some displaying of the image, but that would require modifying the markdown syntax that we support. But that is unlikely to happen until we're closer to standardising what it is we do support.

[mpacer]

Also, since you are @userqin since you are using code and not the attachment, you could create a subclass of Image that would allow you to specify your own HTML repr. Also, I believe you can set the size (but not location) directly using the image metadata or the size and height parameters of the standard Image object.

[harishkashyap]

+1 this still isnt' working. I cant see any images and that is a pain. I wish the team fixes it.

[ninjakx]

Even I ain't able to see any image. Please fix it.

[Snopoff]

Still can't see an image of mine in a notebook 😞

[parrt]

we're working on a fix. what platform @ninjakx ? i like how you want a fix but provide 0 information about error messages etc... please fix your request for a fix ;)

[rahulbhadani]

I am encountering the same problem currently. I opened an ipython notebook in Jupyter from 3 years ago. I remember 3 years ago notebook displaying the image but now it no longer displays.

I have the following text in a markdown cell:

<span style="color:#34495E; font-family:roman; font-size:16px"> SLP has a single layer of weights connecting the inputs and outputs. It can be considered to be simplest kind of feed forward network where the information always moves in one direction, it never goes backward. </span>
<img src="https://www.analyticsvidhya.com/wp-content/uploads/2016/07/SLP.png">