로컬 컴퓨터 또는 웹 리소스에서 Jupyter 노트북에 이미지 또는 그림을 포함시키는 방법은 무엇입니까?

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

markdown에서 이미지 파일 이름 주위에 따옴표를 사용해서는 안됩니다!

오류 메시지를주의 깊게 읽으면 %22링크에 두 부분 이 표시 됩니다. 이것이 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)

이미지가 디스플레이 설정보다 넓은 경우 : thanks

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)공백에 대해 걱정하지 마십시오).

웹 이미지의 경우 :

![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 셀 매직 옵션을 언급 한 사람이 아무도 없습니다. 로부터 문서 (Jupyter위한 IPython하지만 동일)

%% html

Render the cell as a block of HTML

HTML을 사용하는 다른 답변 외에도 (Markdown 또는 %%HTMLmagic을 사용하여)

이미지 높이를 지정해야하는 경우 작동하지 않습니다.

<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을 누르
     거나
     
   • 메뉴 막대에서 셀> 셀 유형> 마크 다운.
     ( 참고 : 셀을 마크 다운으로 변환하는 것이 중요합니다. 그렇지 않으면 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에서 작동

더 이상 IPython이 아닌 Jupyter Notebook API를 사용하려면 ipywidgets Jupyter의 하위 프로젝트를 찾으십시오 . 당신은이 Image위젯을. Docstring은 value매개 변수가 바이트 임을 지정합니다 . 그래서 당신은 할 수 있습니다 :

import requests
from ipywidgets import Image

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

마크 다운 스타일을 사용하는 것이 더 간단하다는 데 동의합니다. 그러나 이미지 디스플레이 노트북 API를 보여줍니다. width및 height매개 변수를 사용하여 이미지 크기를 조정할 수도 있습니다 .

Jupyter 및 Python3에 대한 솔루션은 다음 과 같습니다 .

이미지를라는 폴더에 넣었습니다 ImageTest. 내 디렉토리는 다음과 같습니다

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

이 표현을 사용한 이미지를 보여주기 위해 :

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

또한 조심 /하고\

이것은 마크 다운 셀에서 나를 위해 작동합니다. 어떻게 든 이미지 또는 간단한 파일인지 구체적으로 언급 할 필요가 없습니다.

![](files/picture.png)

내가 찾은 것 중 하나는 이미지의 경로가 노트북이 처음로드 된 위치와 관련이 있어야한다는 것입니다. 그림과 같은 다른 디렉토리로 CD를 넣으면 마크 다운 경로는 여전히 원래로드 디렉토리와 관련이 있습니다.

동의합니다. 동일한 문제가 있었으며 이것이 효과가 있었던 것과 그렇지 않은 것입니다.

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==)