ローカルマシンまたはWebリソースから、画像または画像をjupyterノートブックに埋め込むにはどうすればよいですか？

ジュピターノートに画像を入れたいのですが。

私が次のことをした場合、それはうまくいきます：

from IPython.display import Image
Image("img/picture.png")

しかし、私はマークダウンセルに画像を含めたいと思います。次のコードは404エラーを出します。

![title]("img/picture.png")

私も試しました

![texte]("http://localhost:8888/img/picture.png")

しかし、私はまだ同じエラーが発生します：

404 GET /notebooks/%22/home/user/folder/img/picture.png%22 (127.0.0.1) 2.74ms referer=http://localhost:8888/notebooks/notebook.ipynb

マークダウンでは、画像ファイルの名前を引用符で囲まないでください。

エラーメッセージを注意深く読む%22と、リンクに2つの部分が表示されます。これは、htmlエンコードされた引用符です。

行を変更する必要があります

![title]("img/picture.png")

に

![title](img/picture.png)

更新

次のファイル構造jupyter notebookがあり、ファイルexample.ipynb（<-にはイメージのマークダウンが含まれています）が格納されているディレクトリでコマンドを実行することが前提となっています 。

/
+-- example.ipynb
+-- img
    +-- picture.png

Jupyterノートブックに画像を投稿する方法はいくつかあります。

HTML経由：

from IPython.display import Image
from IPython.core.display import HTML 
Image(url= "http://my_site.com/my_picture.jpg")

HTMLタグを使用してサイズを変更する機能などを保持します...

Image(url= "http://my_site.com/my_picture.jpg", width=100, height=100)

相対パスまたは絶対パスを介して、ローカルに保存された画像を表示することもできます。

PATH = "/Users/reblochonMasque/Documents/Drawings/"
Image(filename = PATH + "My_picture.jpg", width=100, height=100)

画像が表示設定より広い場合： ありがとう

unconfined=True画像の最大幅の制限を無効にするために使用します

from IPython.core.display import Image, display
display(Image('https://i.ytimg.com/vi/j22DmsZEv30/maxresdefault.jpg', width=1900, unconfined=True))

またはマークダウン経由：

• セルがコードダウンセルではなく、マークダウンセルであることを確認してください。コメントの@游凯超に感謝します）
• 一部のシステムでは、マークダウンでファイル名に空白を使用できないことに注意してください。コメントの@CoffeeTableEspressoと@zebralamyに感謝します）
  （macosでは、マークダウンセルにいる限り、次のようにします：![title](../image 1.png)空白の心配はありません）。

Web画像の場合：

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

これらの引用符のいずれかを使用しないように注意を払う@cristianmtrで示すように、""または、それらの''URLの周りを。

またはローカルのもの：

![title](img/picture.png)

@Sebastianによって示される

または、プレーンHTMLを使用することもできます<img src>。これにより、高さと幅を変更でき、マークダウンインタープリターによって引き続き読み取られます。

<img src="subdirectory/MyImage.png" width=60 height=60 />

これは完全に関連しているわけではないことは知っていますが、「Jupyterでの画像の表示方法」を検索すると、この回答が何度も上位に表示されるため、この回答も検討してください。

次のように、matplotlibを使用して画像を表示できます。

import matplotlib.pyplot as plt
import matplotlib.image as mpimg
image = mpimg.imread("your_image.png")
plt.imshow(image)
plt.show()

ここでHTMLセルマジックオプションについて言及している人がいないことに驚いています。ドキュメントから（IPython、Jupyterでも同じ）

%% html

Render the cell as a block of HTML

HTMLを使用する他の回答に加えて（Markdownまたは%%HTMLマジックを使用）：

画像の高さを指定する必要がある場合、これは機能しません。

<img src="image.png" height=50> <-- will not work

これは、JupyterのCSSスタイルheight: auto設定がデフォルトでimgタグに使用し、HTMLの高さ属性をオーバーライドするためです。height代わりに、CSS 属性を上書きする必要があります。

<img src="image.png" style="height:50px"> <-- works

画像をJupyterノートブックに直接挿入します。

注：コンピューターにイメージのローカルコピーが必要です。

Jupyterノートブック自体に画像を挿入できます。これにより、画像をフォルダに個別に保存する必要がなくなります。

手順：

1. セルを次のように変換markdownします。

   • 選択したセルでMキーを押す、
     または
     
   • メニューバーから、セル>セルタイプ>マークダウン。
     （注：セルをMarkdownに変換することが重要です。そうしないと、ステップ2の[画像の挿入]オプションがアクティブになりません）

2. 次に、メニューバーに移動し、[編集]-> [画像の挿入]を選択します。

3. ディスクから画像を選択してアップロードします。

4. Ctrl+ EnterまたはShift+を押しEnterます。

これにより、画像がノートブックの一部として作成され、ディレクトリやGithubにアップロードする必要がなくなります。これはよりきれいに見え、壊れたURLの問題が発生しにくいように感じます。

Markdownでこれを行う方法は次のとおりです。

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

1. セルモードをマークダウンに設定します
2. 画像をセルにドラッグアンドドロップします。次のコマンドが作成されます。

![image.png](attachment:image.png)

3. セルを実行/実行すると、画像が表示されます。

画像は実際にはipynb Notebookに埋め込まれており、個別のファイルをいじる必要はありません。残念ながら、これはまだJupyter-Lab（v 1.1.4）では動作しません。

編集：JupyterLabバージョン1.2.6で動作します

Jupyter Notebook API（IPythonのAPIではなく）を使用したい場合は、ipywidgets Jupyterのサブプロジェクトを見つけます。Imageウィジェットがあります。Docstring valueは、バイトであるパラメーターがあることを指定します。だからあなたはできる：

import requests
from ipywidgets import Image

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

私は同意します、Markdownスタイルを使用する方が簡単です。ただし、画像表示ノートブックAPIが表示されます。パラメータwidthとheightパラメータを使用して、画像のサイズを変更することもできます。

JupyterとPython3のソリューションは次のとおりです。

という名前のフォルダに画像をドロップしましたImageTest。私のディレクトリは：

C:\Users\MyPcName\ImageTest\image.png

画像を表示するには、次の式を使用しました。

![title](/notebooks/ImageTest/image.png "ShowMyImage")

また、に注意/し、\

これはマークダウンセルで機能します。どういうわけか、それが画像なのか単純なファイルなのか、特に言及する必要はありません。

![](files/picture.png)

私が見つけた1つのことは、あなたの画像のパスは、ノートブックが最初にロードされた場所からの相対パスでなければならないということです。ピクチャなどの別のディレクトリにcdした場合、Markdownパスは元のロードディレクトリに対して相対的です。

同意しました、私は同じ問題を抱えていましたが、これはうまくいったことと、うまくいかなかったことです：

WORKED: <img src="Docs/pinoutDOIT32devkitv1.png" width="800"/>
*DOES NOT WORK: <img src="/Docs/pinoutDOIT32devkitv1.png" width="800"/>
DOES NOT WORK: <img src="./Docs/pinoutDOIT32devkitv1.png" width="800"/>*

上記の回答の多くは、ファイルまたはPythonコードを使用して画像を埋め込む方法を提供しますが、markdownとbase64のみを使用してjupyterノートブック自体に画像を埋め込む方法があります。

ブラウザで画像を表示するにdata:image/png;base64,**image data here**は、base64でエンコードされたPNG画像のリンクにアクセスするか、data:image/jpg;base64,**image data here** base64でエンコードされたJPG画像。リンクの例は、この回答の最後にあります。

これをマークダウンページに埋め込むには、ファイルの回答と同様の構成を使用しますが、代わりにbase64リンクを使用します![**description**](data:image/**type**;base64,**base64 data**)。これで画像がJupyter Notebookファイルに100％埋め込まれました。

リンクの例： data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

マークダウンの例： ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)