Insertar imagen en la rebaja del cuaderno de IPython

217

Estoy empezando a depender en gran medida de la aplicación de notebook IPython para desarrollar y documentar algoritmos. Es asombroso; pero hay algo que parece que debería ser posible, pero no puedo entender cómo hacerlo:

Me gustaría insertar una imagen local en mi rebaja del cuaderno de IPython (local) para ayudar a documentar un algoritmo. Sé lo suficiente como para agregar algo así <img src="image.png">a la rebaja, pero eso es lo que sé . Supongo que podría poner la imagen en el directorio representado por 127.0.0.1:8888 (o algún subdirectorio) para poder acceder a ella, pero no puedo averiguar dónde está ese directorio. (Estoy trabajando en una Mac.) Entonces, ¿es posible hacer lo que estoy tratando de hacer sin demasiados problemas?

— benpro
fuente

201

Los archivos dentro del directorio de la notebook están disponibles bajo una url "files /". Entonces, si está en la ruta base, lo estaría <img src="files/image.png">, y los subdirectores, etc. también están disponibles:, <img src="files/subdir/image.png">etc.

Actualización : a partir de IPython 2.0, el files/prefijo ya no es necesario (vea las notas de la versión ). Así que ahora la solución <img src="image.png">simplemente funciona como se esperaba.

— minrk
fuente

3

Ah, probablemente estés usando 0.12, ¿no? Actualmente, el servicio de archivos locales solo está disponible en master. Y sí, el "directorio del cuaderno" es el directorio con los cuadernos (archivos .ipynb).

— minrk

107

Ya que estás en Markdown, ¿por qué no usar ![caption](files/image.png)?

— kynan

44

@minrk: no funciona para mí. Puse "<img src =" k.png ">", pero no muestra nada. k.png está en la misma carpeta que la del archivo del cuaderno.

— Abid Rahman K

44

Por favor, vuelva a leer la respuesta y los comentarios. Su URL siempre comenzará con 'archivos /', por lo que si tiene al k.pnglado de su cuaderno, la URL sería src="files/k.png".

— minrk

2

tienes que actualizar una página web para que se vuelvan a cargar imágenes en una URL determinada.

— minrk

230

La mayoría de las respuestas dadas hasta ahora van en la dirección equivocada, lo que sugiere cargar bibliotecas adicionales y usar el código en lugar del marcado. En Ipython / Jupyter Notebooks es muy simple. Asegúrese de que la celda esté realmente marcada y para mostrar una imagen use:

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

Otra ventaja en comparación con los otros métodos propuestos es que puede mostrar todos los formatos de archivo comunes, incluidos jpg, png y gif (animaciones).

— Philipp Schwarz
fuente

Curioso de cómo sabes este comando. ¿Es exclusivo de Jupyter o se trata de algún lenguaje (formato de látex, tal vez) que está utilizando dentro de Jupyter para agregar la imagen?

— Alex G

1

@ Alex G, Markdown es un lenguaje con una sintaxis de formato de texto plano diseñada para que se pueda convertir a HTML y muchos otros formatos. Markdown se usa a menudo para crear texto enriquecido utilizando un editor de texto sin formato. Consulte el siguiente enlace para conocer la sintaxis: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

— Philipp Schwarz

@PhilippSchwarz ¿hay algunas opciones en su ejemplo anterior para controlar el tamaño de la imagen 'pegada'? Usando la <img...>etiqueta, tales opciones aparecen aproximadamente así <img ... width="480">.

— Reb.Cabin

1

Usar esto no funcionó. Notebook estaba buscando en una ubicación específica / notebooks / <mi ruta de trabajo adjunta aquí> - seguramente esto no es root - y la ruta local no existía. Me pareció útil usar la imagen de inserción del cuaderno , que agregó la imagen como un archivo adjunto (que ahora es portátil).

— Mark

2

¿Hay alguna forma de usar este método con archivos de imagen que tengan espacio en sus nombres?

— zebralamy

78

Estoy usando ipython 2.0, así que solo dos líneas.

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

— Gomes
fuente

25

Esta es la forma correcta de mostrar una imagen en una celda de código . La respuesta de minrk es la forma correcta de mostrar una imagen en una celda de reducción .

— Mike

3

Usando jupyter notebook 4.2.0, no muestra la imagen a menos que llame displaytambién: from IPython.display import Image, display; display(Image(filename='output1.png'))

— Matteo T.

22

[Obsoleto]

IPython / Jupyter ahora tiene soporte para módulos de extensión que pueden insertar imágenes mediante copiar y pegar o arrastrar y soltar.

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

La extensión de arrastrar y soltar parece funcionar en la mayoría de los navegadores

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

Pero copiar y pegar solo funciona en Chrome.

— Miguel
fuente

1

Esta respuesta necesita algunos votos positivos. Muy pocos conocen las extensiones de Ipython.

— Thoran

Acabo de intentar arrastrar y soltar en Safari y Chrome, no funciona para mí (OSX, Py3, todas las actualizaciones)

— K.-Michael Aye

2

El segundo enlace que publicó está roto: ¿la extensión ya no es compatible?

— zthomas.nc

Tampoco puedo encontrar la extensión más.

— yerforkferchips

Sí, Jupyter ha avanzado un poco en los últimos tres años y esta respuesta es bastante obsoleta.

— Mike

18

Obtener una imagen en Jupyter NB es una operación mucho más simple de lo que la mayoría de la gente ha mencionado aquí.

1) Simplemente cree una celda Markdown vacía. 2) Luego arrastre y suelte el archivo de imagen en la celda vacía Markdown.

Aparece el código Markdown que insertará la imagen.

Por ejemplo, una cadena que se muestra resaltada en gris a continuación aparecerá en la celda Jupyter:

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

3) Luego ejecute la celda Markdown presionando Shift-Enter. El servidor Jupyter insertará la imagen, y la imagen aparecerá.

Estoy ejecutando el servidor portátil Jupyter es: 5.7.4 con Python 3.7.0 en Windows 7.

¡Esto es muy simple!

— Rich Lysakowski PhD
fuente

2

¡Esta es realmente la mejor solución que he encontrado!

— GCGM

Lamentablemente, este método no funciona cuando Jupyter Notebook versión 6.0 está alojado en Google Cloud. ¿Alguien tiene una solución alternativa que funcione sin privilegios de administrador, algo además de instalar la nbextension de arrastrar y soltar?

— Rich Lysakowski PhD

13

Puse el cuaderno de IPython en la misma carpeta con la imagen. Yo uso Windows El nombre de la imagen es "phuong huong xac dinh.PNG".

En Markdown:

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

Código:

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

— hidromano
fuente

1

referencia de documentación ipython.readthedocs.io/en/stable/api/generated/… , aunque usar markdown ( ![alt text](foo.png "the title")es preferible, a menos que sea necesario usar args adicionales de api.

— michael

9

Primero asegúrese de estar en el modelo de edición Markdown en la celda del cuaderno de ipython

Esta es una forma alternativa al método propuesto por otros <img src="myimage.png">:

![title](img/picture.png)

También parece funcionar si falta el título:

![](img/picture.png)

Tenga en cuenta que no debe haber citas en el camino. ¡No estoy seguro si esto funciona para caminos con espacios en blanco!

— tsando
fuente

1

Para mí, las imágenes con espacios en blanco en el nombre no se mostraban en el cuaderno. Eliminé los espacios, puedo ver ahora.

— insanely_sin

9

La última versión del cuaderno jupyter acepta copiar / pegar la imagen de forma nativa

— Romain Jouin
fuente

Prefiero esta opción, ya que incrusta la imagen en el binario del cuaderno. Hace que el portátil sea más pesado, pero no necesita mantener la imagen en la ruta relativa.

— Tulio Casagrande

8

Si desea mostrar la imagen en una celda Markdown , use:

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

Si desea mostrar la imagen en una celda de Código , use:

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

— seralouk
fuente

En la celda de reducción, para mí, funciona sin las comas:<img src="files/image.png" width=800 height=400>

— aerijman

Es cierto que no se necesitan comas en los comandos HTML. ver mi actualización

— seralouk

5

Cambie el bloque predeterminado de "Código" a "Markdown" antes de ejecutar este código:

![<caption>](image_filename.png)

Si el archivo de imagen está en otra carpeta, puede hacer lo siguiente:

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

— Jade Cacho
fuente

4

Para aquellos que buscan dónde colocar el archivo de imagen en la máquina Jupyter para que pueda mostrarse desde el sistema de archivos local.

Puse mi mypic.pngen

/root/Images/mypic.png

(esa es la carpeta Imágenes que aparece en el navegador de archivos en línea Jupyter)

En ese caso, necesito poner la siguiente línea en la celda Markdown para que mi foto se muestre en el bloc de notas:

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

— Sergey Shcherbakov
fuente

2

La respuesta de Minrk es correcta.

Sin embargo, descubrí que las imágenes aparecían rotas en la Vista de impresión (en mi máquina Windows que ejecuta la distribución Anaconda de IPython versión 0.13.2 en un navegador Chrome)

La solución para esto era usar <img src="../files/image.png">en su lugar.

Esto hizo que la imagen apareciera correctamente tanto en la Vista de impresión como en la vista de edición normal de iPython.

ACTUALIZACIÓN: a partir de mi actualización a iPython v1.1.0 ya no hay necesidad de esta solución ya que la vista de impresión ya no existe. De hecho, debe evitar esta solución, ya que evita que la herramienta nbconvert encuentre los archivos.

— jlarchibald
fuente

-3

Puede encontrar su directorio de trabajo actual mediante el comando 'pwd' en el cuaderno jupyter sin comillas.

— Noman Nazir
fuente