notebook: Displaying image data in Markdown cells does not work
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.
About this issue
- Original URL
- State: closed
- Created 9 years ago
- Reactions: 3
- Comments: 19 (6 by maintainers)
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.+1 this still isnt’ working. I cant see any images and that is a pain. I wish the team fixes it.
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.
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.
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.AFAIK to control the styling of an image you need to generate the HTML yourself.