IPython Notebookマークダウンへの画像の挿入


216

アルゴリズムの開発と文書化は、IPythonノートブックアプリに大きく依存し始めています。すばらしい; しかし、それは可能であるように見えるものがありますが、私はそれを行う方法を理解できません:

アルゴリズムの文書化を支援するために、ローカル画像を私の(ローカル)IPythonノートブックマークダウンに挿入したいと思います。私<img src="image.png">はマークダウンに何かを追加するのに十分知っていますが、それは私の知る限りです。127.0.0.1:8888で表されるディレクトリ(またはサブディレクトリ)にイメージを配置してアクセスできると思いますが、そのディレクトリがどこにあるのかわかりません。(私はMacで作業しています。)では、私がしようとしていることをあまり問題なく行うことはできますか?

回答:


200

Notebook dir内のファイルは、 "files /" urlの下にあります。したがって、それがベースパスにある場合は<img src="files/image.png">、サブディレクトリなども利用できます<img src="files/subdir/image.png">

更新:IPython 2.0以降、files/プレフィックスは不要になりました(リリースノートを参照)。したがって、ソリューションは<img src="image.png">単に期待どおりに機能します。


3
ああ、たぶん0.12を使っているのでは?ローカルファイルの提供は現在、マスターでのみ使用できます。はい、「ノートブックディレクトリ」はノートブック(.ipynbファイル)のディレクトリです。
minrk

107
マークダウンしているので、なぜ使用しないの![caption](files/image.png)ですか?
キナン2013年

4
@minrk:私にはうまくいきません。"<img src =" k.png ">"を入れましたが、何も表示されません。k.pngは、ノートブックファイルと同じフォルダーにあります。
Abid Rahman K

4
回答とコメントをもう一度読んでください。URLは常に「files /」で始まるk.pngため、ノートブックの隣にある場合、URLはになりますsrc="files/k.png"
minrk 2013

2
再読み込みするには、指定されたURLの画像のWebページを更新する必要があります。
minrk 2013

229

これまでの回答のほとんどは間違った方向に進んでおり、追加のライブラリをロードして、マークアップの代わりにコードを使用することを提案しています。Ipython / Jupyter Notebooksでは、非常にシンプルです。セルが実際にマークアップ内にあり、画像を表示することを確認します。

![alt text](imagename.png "Title")

提案されている他の方法と比較した場合のさらなる利点は、jpg、png、gif(アニメーション)を含むすべての一般的なファイル形式を表示できることです。


このコマンドをどのように知っているかについて興味があります。それはJupyterに固有のものですか、それともJupyter内で画像を追加するために使用している言語(おそらくラテックスフォーマット)ですか?
Alex G

1
@ Alex G、Markdownは、HTMLおよび他の多くの形式に変換できるように設計されたプレーンテキスト形式の構文を持つ言語です。Markdownは、プレーンテキストエディターを使用してリッチテキストを作成するためによく使用されます。構文については、次のリンクをご覧ください。github.com
Philipp Schwarz

@PhilippSchwarz「貼り付けられた」画像のサイズを制御するために、上記の例にいくつかのオプションがありますか?<img...>タグを使用すると、そのようなオプションはほぼこのように表示されます<img ... width="480">
Reb.Cabin 2017年

1
これを使用しても機能しませんでした。Notebookは特定の場所/ notebooks / <ここに追加された私の作業パス>を探していました-確かにこれはルートではありません-ローカルパスが存在しませんでした。ノートブックの挿入画像を使用すると便利です。画像は添付ファイルとして追加されました(現在は移植可能です)。
マーク

2
名前にスペースがある画像ファイルでこの方法を使用する方法はありますか?
ゼブララミー2018

78

私はipython 2.0を使用しているので、2行だけです。

from IPython.display import Image
Image(filename='output1.png')

25
これは、コードセルに画像を表示する正しい方法です。minrkの答えはで画像を表示するための正しい方法で値下げセル。
マイク

3
私は呼んでいない限りjupyterノート4.2.0を使用して、画像を表示されないdisplay、あまりにも: from IPython.display import Image, display; display(Image(filename='output1.png'))
マッテオT.

21

[廃止]

IPython / Jupyterは、コピーアンドペーストまたはドラッグアンドドロップで画像を挿入できる拡張モジュールをサポートするようになりました。

https://github.com/ipython-contrib/IPython-notebook-extensions

ドラッグアンドドロップ拡張機能は、ほとんどのブラウザーで機能するようです

https://github.com/ipython-contrib/IPython-notebook-extensions/tree/master/nbextensions/usability/dragdrop

ただし、コピーと貼り付けはChromeでのみ機能します。


1
この回答にはいくつかの賛成票が必要です。Ipython拡張機能について知っている人はほとんどいません。
Thoran

SafariとChromeでドラッグアンドドロップを試してみましたが、機能しません(OSX、Py3、すべてのアップデート)
K.-Michael Aye

2
投稿した2番目のリンクは壊れています-拡張機能はサポートされなくなりましたか?
zthomas.nc 2017

拡張機能ももう見つかりません。
yerforkferchips 2018年

はい、Jupyterは過去3年間で少し進んでおり、この回答はかなり時代遅れです。
Mike

17

Jupyter NBへのイメージの取り込みは、ほとんどの人がここで言及したよりもはるかに簡単な操作です。

1)空のMarkdownセルを作成するだけです。2)次に、画像ファイルを空のMarkdownセルにドラッグアンドドロップします。

画像を挿入するMarkdownコードが表示されます。

たとえば、下で灰色で強調表示されている文字列は、Jupyterセルに表示されます。

![Venus_flytrap_taxonomy.jpg](attachment:Venus_flytrap_taxonomy.jpg)

3)次に、Shift-Enterキーを押して、Markdownセルを実行します。Jupyterサーバーが画像を挿入し、画像が表示されます。

私が実行しているJupyterノートブックサーバーは、Windows 7.x上の5.7.4とPython 3.7.0です。

これはとても簡単です!!


2
これは本当に私が見つけた最高の解決策です!!
GCGM、

残念ながら、Jupyter Notebookバージョン6.0がGoogle Cloudでホストされている場合、この方法は機能しません。誰かが管理者権限なしで機能する回避策を持っています、ドラッグアンドドロップnbextensionをインストールする以外に何か?
リッチリサコウスキー博士

13

IPythonノートブックを画像と同じフォルダーに配置しました。私はWindowsを使用しています。画像名は「phuong huong xac dinh.PNG」です。

マークダウンでは:

<img src="phuong huong xac dinh.PNG">

コード:

from IPython.display import Image
Image(filename='phuong huong xac dinh.PNG')

1
文書参照ipython.readthedocs.io/en/stable/api/generated/... 、値下げを使用しているが(![alt text](foo.png "the title")APIから追加引数を使用が必要とされない限り、好ましい私見である。
マイケル

9

まず、ipythonノートブックセルのマークダウン編集モデルにいることを確認します

これは他の人が提案した方法の代替方法です <img src="myimage.png">です。

![title](img/picture.png)

タイトルがない場合にも機能するようです:

![](img/picture.png)

パスには引用符を含めないでください。ただし、これが空白のあるパスで機能するかどうかはわかりません!


1
私にとって、名前に空白が含まれている画像は、ノートブックにレンダリングされていませんでした。スペースをはずして今見ることができます。
insanely_sin

9

jupyterノートブックの最新バージョンは、ネイティブにイメージのコピー/貼り付けを受け入れます


ノートブックのバイナリに画像を埋め込むので、このオプションを選択します。ノートブックは重くなりますが、画像を相対パスで保持する必要はありません。
Tulio Casagrande

8

Markdownセルに画像を表示したい場合は、以下を使用します。

<img src="files/image.png" width="800" height="400">

コードセルに画像を表示する場合は、次のコードを使用します。

from IPython.display import Image
Image(filename='output1.png',width=800, height=400)

マークダウン細胞では、私にとっては、カンマなしで動作します:<img src="files/image.png" width=800 height=400>
aerijman

HTMLコマンドではコンマは不要です。私の最新情報を見る
seralouk

5

このコードを実行する前に、デフォルトのブロックを「コード」から「マークダウン」に変更します。

![<caption>](image_filename.png)

画像ファイルが別のフォルダーにある場合は、次の操作を実行できます。

![<caption>](folder/image_filename.png)

4

ローカルファイルシステムから表示できるように、Jupyterマシンのどこにイメージファイルを配置するかを検討している方。

私はに入れmypic.pngました

/root/Images/mypic.png

(Jupyterオンラインファイルブラウザーに表示されるImagesフォルダーです)

その場合、メモ帳に写真を表示するには、Markdownセルに次の行を挿入する必要があります。

![My Title](Images/mypic.png)

2

ミンクの答えは正しいです。

ただし、印刷ビューで画像が壊れているように見えた(ChromeブラウザでIPythonバージョン0.13.2のAnacondaディストリビューションを実行しているWindowsマシン上)

これの回避策は使用することでした <img src="../files/image.png">代わりことでした。

これにより、印刷ビューと通常のiPython編集ビューの両方に画像が正しく表示されました。

更新:iPython v1.1.0にアップグレードした時点では、印刷ビューが存在しないため、この回避策は必要ありません。実際には、nbconvertツールがファイルを見つけられなくなるため、この回避策を回避する必要があります。


-3

あなたは現在の作業ディレクトリを引用符なしでjupyterノートブックの「pwd」コマンドで見つけることができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.