IPython 노트북 마크 다운에 이미지 삽입


217

알고리즘을 개발하고 문서화하기 위해 IPython 노트북 앱에 크게 의존하기 시작했습니다. 대단합니다. 그러나 가능 해야하는 것처럼 보이지만 어떻게 해야하는지 알 수 없습니다.

알고리즘 문서화를 돕기 위해 로컬 이미지를 (로컬) IPython 노트북 마크 다운에 삽입하고 싶습니다. <img src="image.png">마크 다운에 비슷한 것을 추가 할만큼 충분히 알고 있지만, 제 지식은 그 정도입니다. 액세스 할 수 있도록 127.0.0.1:8888 (또는 일부 하위 디렉토리)로 표시된 디렉토리에 이미지를 넣을 수 있다고 가정하지만 해당 디렉토리의 위치를 ​​알 수는 없습니다. (나는 맥에서 일하고 있습니다.) 그래서 너무 많은 어려움없이 내가하려는 일을 할 수 있습니까?

답변:


201

노트북 디렉토리 내부의 파일은 "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)않겠습니까?
kynan

4
@ minrk : 그것은 나를 위해 작동하지 않습니다. "<img src ="k.png ">"를 넣었지만 아무 것도 표시하지 않습니다. k.png는 노트북 파일과 동일한 폴더에 있습니다.
Abid Rahman K

4
답변과 의견을 다시 읽으십시오. URL은 항상 'files /'로 시작하므로 k.png노트북 옆에 있으면 URL은입니다 src="files/k.png".
minrk

2
특정 URL의 이미지를 새로 고침하려면 웹 페이지를 새로 고침해야합니다.
minrk

230

지금까지 제공된 대부분의 답변은 잘못된 방향으로 진행되어 추가 라이브러리를로드하고 마크 업 대신 코드를 사용하도록 제안합니다. Ipython / Jupyter Notebooks는 매우 간단합니다. 셀이 실제로 마크 업 상태인지 확인하고 이미지 사용을 표시하려면 다음을 수행하십시오.

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

제안 된 다른 방법과 비교하여 더 많은 이점은 jpg, png 및 gif (애니메이션)를 포함한 모든 일반적인 파일 형식을 표시 할 수 있다는 것입니다.


이 명령을 어떻게 알고 있는지 궁금합니다. Jupyter에 고유 한가 아니면 Jupyter 내에서 이미지를 추가하기 위해 사용하는 언어 (라텍스 형식)일까요?
Alex G

1
@ Alex G, Markdown은 HTML 및 기타 여러 형식으로 변환 할 수 있도록 설계된 일반 텍스트 형식 구문을 사용하는 언어입니다. 마크 다운은 보통 일반 텍스트 편집기를 사용하여 서식있는 텍스트를 만드는 데 사용됩니다. 구문을 배우려면 다음 링크를 확인하십시오. github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Philipp Schwarz

@PhilippSchwarz '붙여 넣은'이미지의 크기를 제어하는 ​​위의 예에는 몇 가지 옵션이 있습니까? <img...>태그를 사용하면 이러한 옵션이 대략 다음과 같이 나타납니다 <img ... width="480">.
Reb. Cabin

1
이것을 사용하면 작동하지 않았습니다. 노트북이 특정 위치 / notebooks / <여기에 추가 된 내 작업 경로>를 찾고있었습니다. 반드시 루트가 아니며 로컬 경로가 없습니다. 노트북 인서트 이미지를 사용하는 것이 도움이되었다는 것을 알았습니다 . 이미지를 첨부 파일로 추가했습니다 (이제 이식 가능).
Mark

2
이름에 공백이있는 이미지 파일에이 방법을 사용하는 방법이 있습니까?
zebralamy

78

나는 ipython 2.0을 사용하고 있으므로 두 줄만 있습니다.

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

25
이것이 코드 셀에 이미지를 표시하는 올바른 방법 입니다. minrk의 답변은 마크 다운 셀에 이미지를 표시하는 올바른 방법 입니다.
Mike

3
jupyter notebook 4.2.0을 사용하면 전화하지 않으면 이미지가 표시되지 않습니다 display. from IPython.display import Image, display; display(Image(filename='output1.png'))
Matteo T.

22

[폐기]

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
게시 한 두 번째 링크가 끊어졌습니다. 확장 프로그램이 더 이상 지원되지 않습니까?
zthomas.nc 2014

또한 더 이상 확장 프로그램을 찾을 수 없습니다.
yerforkferchips

예, Jupyter는 지난 3 년 동안 약간 이동했으며이 답변은 매우 쓸모가 없습니다.
Mike

18

Jupyter NB로 이미지를 가져 오는 것은 대부분의 사람들이 여기에서 언급 한 것보다 훨씬 간단합니다.

1) 빈 마크 다운 셀을 만들면됩니다. 2) 그런 다음 이미지 파일을 빈 마크 다운 셀로 끌어다 놓습니다.

이미지를 삽입 할 마크 다운 코드가 나타납니다.

예를 들어 아래 회색으로 강조 표시된 문자열이 Jupyter 셀에 나타납니다.

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

3) 그런 다음 Shift-Enter를 눌러 마크 다운 셀을 실행하십시오. 그러면 Jupyter 서버가 이미지를 삽입 한 다음 이미지가 나타납니다.

Jupyter 노트북 서버를 실행 중입니다 : Windows 7에서 Python 3.7.0을 사용하는 5.7.4

너무 간단합니다!


2
이것은 내가 찾은 최고의 솔루션입니다 !!
GCGM

불행히도 Jupyter Notebook 버전 6.0이 Google Cloud에서 호스팅되는 경우이 방법이 작동하지 않습니다. 끌어서 놓기 nbextension을 설치하는 것 외에 관리자 권한없이 작동하는 해결 방법이 있습니까?
리치 Lysakowski 박사

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/… , markdown 사용 ( ![alt text](foo.png "the title")api의 추가 인수를 요구하지 않는 한 imho가 바람직 함)
michael

9

먼저 ipython 노트북 셀에서 마크 다운 편집 모델인지 확인하십시오.

이것은 다른 사람들이 제안한 방법의 대안입니다 <img src="myimage.png">.

![title](img/picture.png)

제목이 없으면 작동하는 것 같습니다.

![](img/picture.png)

경로에 인용 부호가 없어야합니다. 공백이있는 경로에서 작동하는지 확실하지 않습니다!


1
나를 위해 이름에 공백이있는 이미지는 노트북에서 렌더링되지 않았습니다. 나는 공간을 제거했는데 지금 볼 수 있습니다.
insanely_sin

9

Jupyter 노트북의 마지막 버전은 기본적으로 이미지 복사 / 붙여 넣기를 허용합니다


노트북 바이너리에 이미지를 포함시키기 때문에이 옵션을 선호합니다. 노트북을 더 무겁게 만들지 만 이미지를 상대 경로에 유지할 필요는 없습니다.
Tulio Casagrande

8

마크 다운 셀에 이미지를 표시하려면 다음을 사용하십시오.

<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

이 코드를 실행하기 전에 기본 블록을 "Code"에서 "Markdown"으로 변경하십시오.

![<caption>](image_filename.png)

이미지 파일이 다른 폴더에 있으면 다음을 수행 할 수 있습니다.

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

4

로컬 파일 시스템에서 이미지 파일을 볼 수 있도록 Jupyter 시스템에 이미지 파일을 배치 할 위치를 찾는 사람들을 위해.

나는 나의 넣어 mypic.png로를

/root/Images/mypic.png

(즉, Jupyter 온라인 파일 브라우저에 표시되는 이미지 폴더)

이 경우 마크 다운 셀에 다음 줄을 넣어 그림을 메모장에 표시해야합니다.

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

2

밍크의 대답이 맞습니다.

그러나 Print View (Chrome 브라우저에서 IPython 버전 0.13.2의 Anaconda 배포를 실행하는 Windows 컴퓨터)에서 이미지가 깨진 것으로 나타났습니다.

이에 대한 해결 방법은 <img src="../files/image.png">대신 사용하는 것입니다.

이로 인해 이미지가 인쇄보기 및 일반 iPython 편집보기 모두에서 올바르게 나타납니다.

업데이트 : iPython v1.1.0으로 업그레이드 할 때 인쇄보기가 더 이상 존재하지 않으므로이 해결 방법이 더 이상 필요하지 않습니다. 실제로이 해결 방법은 nbconvert 도구가 파일을 찾지 못하므로 피해야합니다.


-3

jupyter notebook에서 따옴표없이 'pwd'명령으로 현재 작업 디렉토리를 찾을 수 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.