CODEWITHSUNDEEP
imageipythonjupyter-notebook
DilithiumMatrix
DilithiumMatrix

Reputation: 18667

Image not appearing in ipython notebook when in a non-sub directory

I'm trying to display a png image in an ipython notebook from an absolute path /Users/zhermes/[...]/image.png, using the code

<img src="/Users/zhermes/[...]/image.png" style="width: 80%">

but it won't embed (it produces a broken image icon). I've confirmed that the path is correct using:

In: print os.path.exists('/Users/zhermes/[...]/image.png')
Out: True

If I make a copy of the image in the local directory, i.e. : ./image.png, then this works fine:

<img src="image.png" style="width: 80%">

similarly its fine if I have a local subdirectory like ./images/image.png

What's going wrong here?

Edit: using IPython.display.Image does work, but I'd prefer to use markdown.

Upvotes: 0

Views: 2861

Answers (2)

copiancestral
copiancestral

Reputation: 122

I've had a similar situation in which my images or pdfs won't show up on my ipython notebook. Matt is right, the important part is that the local server that renders your notebook has access to the files you are trying to use.

In my case the directory where I have a project with notebooks looks like this:

.
├── LICENSE.txt
├── README.md
├── images
│   ├── conductor.png
│   └── simple-position-sensor.png
├── notebooks
│   ├── performance-characteristics.ipynb
│   ├── position-sensor.ipynb
│   ├── resistance-temperature-detectors.html
│   ├── resistance-temperature-detectors.ipynb
│   └── resistance-temperature-detectors.slides.html
├── pdfs
│   └── linear-approximation.pdf
└── scripts
    ├── interp1d.py
    └── numbered_eq.py

When I run ipython notebook inside the notebooks folder the images don't render (markdown or html). They do render, as in your case, with IPython.display.Image.

The solution is to run ipython notebook on the working directory that has all the files you need for the ipython notebook.

Upvotes: 1

Matt
Matt

Reputation: 27843

You are confusing url and path, browser and kernel,localhost and server. Try imagining the server is on AWS with the kernel in a super computer on rackspace with chrome/firefox on your laptop.

<img src="/Users/zhermes/[...]/image.png" style="width: 80%"> use a path instead of a URL, so don't work. <img src="image.png" style="width: 80%"> use a URL, which by some magic of IPython is mapped to current_working/image.png directory (on AWS).

IPython.display.Image get the image on rackspace.

What you ask in Markdown would access file on your laptop. For security reason it is impossible, otherwise the all internet would have access to your all hard drive.

Upvotes: 1

Related Questions