¿Cómo incrustar una imagen o una imagen en el jupyter notebook, ya sea desde una máquina local o desde un recurso web?


304

Me gustaría incluir la imagen en un cuaderno jupyter.

Si hice lo siguiente, funciona:

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

Pero me gustaría incluir las imágenes en una celda de reducción y el siguiente código da un error 404:

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

También intenté

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

Pero sigo teniendo el mismo error:

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

Respuestas:


306

¡No debe usar comillas alrededor del nombre de los archivos de imagen en markdown!

Si lee cuidadosamente su mensaje de error, verá las dos %22partes en el enlace. Esa es la comilla codificada html.

Tienes que cambiar la linea

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

a

![title](img/picture.png)

ACTUALIZAR

Se supone que tiene la siguiente estructura de archivos y que ejecuta el jupyter notebookcomando en el directorio donde example.ipynbestá almacenado el archivo (<- contiene el descuento para la imagen):

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

8
Para mí, esto no funciona al descargar el cuaderno como html. Muestra un enlace de imagen roto. Usando IPython.display.Imagetrabajos como se esperaba.
joelostblom

77
@cheflo La sintaxis anterior no incrusta la imagen en el archivo html. Si busca en el código fuente del archivo html, encontrará una entrada como <img src = "img / picture.png" alt = "title">. Para ver la imagen, debe copiarla en la carpeta imgrelativa al archivo html.
Sebastian Stigler

1
Sospeché que ese era el caso, gracias por aclarar. Pensé que esta diferencia entre los dos enfoques era inesperada y, al menos para mí, determiné cuál elegir, por lo que quería llamar la atención.
joelostblom

3
mientras lo hace a través de markdown, asegúrese de que el archivo de imagen esté en el mismo directorio en el que se encuentra su computadora portátil, por alguna extraña razón (en mi caso), jupyter-notebook no estaba convencido de actuar en la ruta completa ... ![title](picture.png)
Arun Kumar Khattri

2
@ArunKumarKhattri - tenía el mismo problema, solo funcionaba la ruta de acceso al cuaderno - en mi caso:! [Título] (../ img / picture.png)
ohad edelstain

210

Hay varias formas de publicar una imagen en los cuadernos Jupyter:

a través de HTML:

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

Conserva la capacidad de usar etiquetas HTML para cambiar el tamaño, etc.

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

También puede mostrar imágenes almacenadas localmente, ya sea a través de una ruta relativa o absoluta.

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

si la imagen es más ancha que la configuración de la pantalla: gracias

se usa unconfined=Truepara desactivar el confinamiento de ancho máximo de la imagen

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

o mediante descuento:

  • asegúrese de que la celda sea una celda de rebaja y no una celda de código, gracias @ 游 凯 超 en los comentarios)
  • Tenga en cuenta que en algunos sistemas, el descuento no permite espacios en blanco en los nombres de archivo. Gracias a @CoffeeTableEspresso y @zebralamy en los comentarios)
    (en MacOS, siempre y cuando usted está en una celda de reducción del precio que lo haría así: ![title](../image 1.png)y no se preocupan por el espacio en blanco).

para una imagen web:

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

como lo muestra @cristianmtr Prestando atención para no usar estas comillas ""ni las ''que están alrededor de la URL.

o uno local:

![title](img/picture.png)

demostrado por @Sebastian


Es cierto que la posibilidad de cambiar el tamaño de la imagen es interesante. Pero para la representación futura, el descuento es mejor para mí.
Ger

3
¿Puedes poner uno local con ruta absoluta, a través de markdown? Lo intenté pero no parece funcionar. Editar: Firefox (y Chrome) no permiten el acceso a archivos locales por seguridad
Ciprian Tomoiagă

2
@SwimBikeRun debes seleccionar el tipo de celda correcto. su tipo de celda actual debe ser código
youkaichao

1
Respuesta infravalorada. Muy minucioso
Nathan

1
la versión de descuento no permite espacios en los nombres de los archivos, para cualquiera que se encuentre con ese problema
CoffeeTableEspresso

58

Alternativamente, puede usar un HTML simple <img src>, que le permite cambiar la altura y el ancho, y el intérprete Markdown aún lo lee:

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

3
¡Excelente! ¡Prefiero esta respuesta ya que tenemos el control del tamaño de salida! Eso es importante, por ejemplo, cuando se utiliza la herramienta pelican para publicar jupyter notebook como páginas html estáticas.
Svend

77
HTML no necesita comas, solo ponga un espacio entre sus atributos, y se recomienda poner comillas alrededor de todos los valores de los atributos, por ejemplo width="60".
Colllin

Santo cielo Esto es súper increíble
Tessaracter

Sí, es increíble :) pero ... la imagen se pierde en las versiones en PDF. Demasiado.
babou

21

Sé que esto no es totalmente relevante, pero como esta respuesta se clasifica primero muchas veces cuando busca ' cómo mostrar imágenes en Jupyter ', considere esta respuesta también.

Puede usar matplotlib para mostrar una imagen de la siguiente manera.

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

19

Me sorprende que nadie aquí haya mencionado la opción mágica de celdas html. de los documentos (IPython, pero lo mismo para Jupyter)

%% html

Render the cell as a block of HTML

19

Además de las otras respuestas usando HTML (ya sea en Markdown o usando la %%HTMLmagia:

Si necesita especificar la altura de la imagen, esto no funcionará:

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

Esto se debe a que el estilo CSS en Jupyter usa height: autopor defecto para las imgetiquetas, lo que anula el atributo de altura HTML. En su lugar, debe sobrescribir el heightatributo CSS :

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

19

Inserte la imagen directamente en el cuaderno Jupyter.

Nota: debe tener una copia local de la imagen en su computadora

Puede insertar la imagen en el cuaderno Jupyter. De esta manera, no necesita mantener la imagen por separado en la carpeta.

Pasos:

  1. Convierta la celda a markdownpor:

    • presionando M en la celda seleccionada
      O
    • Desde la barra de menú, Celda> Tipo de celda> Markdown.
      ( Nota: es importante convertir la celda a Markdown, de lo contrario, la opción "Insertar imagen" en el Paso 2 no estará activa)
  2. Ahora ve a la barra de menú y selecciona Editar -> Insertar imagen.

  3. Seleccione la imagen de su disco y cárguela.

  4. Presione Ctrl+ Entero Shift+ Enter.

Esto hará que la imagen sea parte del cuaderno y no necesita cargarla en el directorio o Github. Siento que esto se ve más limpio y no es propenso a un problema de URL roto.


Me salvó! Gracias
Mohammad Heydari

Otra funcionalidad útil añadida por los desarrolladores de Jupyter. Una desventaja a tener en cuenta, para los casos en que esto es importante: incluiría la imagen en el IPyNB Jasoncódigo, por lo que es mucho más grande y no tan amigable para la revisión del código (por ejemplo, al inspeccionar diffs).
eldad-a

13

Así es como puedes hacerlo con Markdown:

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

1
Por alguna razón, mostrar imágenes a través de Markdown no funciona para mí ... ¿Está seguro de que la sintaxis es correcta cristianmtr?
Reblochon Masque

1
Sí, solo lo probé de nuevo. ¿Estás seguro de establecer la celda en Markdown? Además, ¿qué versión de IPython / Jupyter estás usando? El mío dice: "La versión del servidor portátil es 4.0.4 y se ejecuta en: Python 2.7.8 (predeterminado, 30 de junio de 2014, 16:08:48) [MSC v.1500 de 64 bits (AMD64)]" Aquí hay un captura de pantalla con los resultados: i.imgur.com/4ISJFDE.png
cristianmtr

cuidado con las rutas, lo que funciona localmente no funciona en línea, .e. imgs \ pic.png funciona localmente, mientras que en línea es 1: case sensitve (Pic.png) 2: backslach y slash no son lo mismo ...: / -
Infraestructura inteligente

Funciona muy bien en Python 3.8. Gracias
jamescampbell

No se permiten espacios en el nombre de archivo para rebajas, en caso de que alguien más se encuentre con este problema
CoffeeTableEspresso

12
  1. Establecer el modo de celda en Markdown
  2. Arrastre y suelte su imagen en la celda. Se creará el siguiente comando:

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

  1. Ejecute / Ejecute la celda y aparecerá la imagen.

La imagen está realmente incrustada en el cuaderno de ipynb y no necesita perder el tiempo con archivos separados. Desafortunadamente, esto aún no funciona con Jupyter-Lab (v 1.1.4).

Editar: Funciona en JupyterLab Versión 1.2.6


1
Sí, cuando quiero descargar como HTML incrustado, aparece el error "nbconvert falló: falta el archivo adjunto: imagen.png". ¿Por qué?
efueyo

Pegar una imagen desde el portapapeles también funciona para mí (después de configurar el modo de celda en Markdown)
CgodLEY

10

Si desea utilizar la API de Jupyter Notebook (y ya no la de IPython), encuentro el subproyecto de ipywidgets Jupyter. Tienes un Imagewidget Docstring especifica que tiene un valueparámetro que es un byte. Entonces puedes hacer:

import requests
from ipywidgets import Image

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

Estoy de acuerdo, es más simple usar el estilo Markdown. Pero le muestra la API de Notebook de visualización de imágenes. También puede cambiar el tamaño de la imagen con los parámetros widthy height.


Parece que la opción valuefue renombrada datamientras tanto. Para una imagen almacenada localmente, el código Image(data=open(filename_png, 'rb').read())funcionó para mí.
jottbe

7

Aquí hay una solución para Jupyter y Python3 :

Dejé caer mis imágenes en una carpeta llamada ImageTest. Mi directorio es:

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

Para mostrar la imagen, utilicé esta expresión:

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

También ten cuidado /y\


Esto solo funciona para mí. ¡Gracias! ¡"ShowMyImage" funciona como un encanto!
Pranzell

4

Esto funciona para mí en una celda de descuento. De alguna manera, no necesito mencionar específicamente si es una imagen o un archivo simple.

![](files/picture.png)

¿Cómo difiere de la respuesta de Sebastian Stigler?
iNet

1
Solo quería resaltar que funcionó para mí sin incluir el título dentro del corchete. Nada diferente.
Pranav Pandit

2

Una cosa que encontré es que la ruta de su imagen debe ser relativa a donde se cargó originalmente la computadora portátil. Si realiza un CD a un directorio diferente, como Imágenes, su ruta de Markdown todavía es relativa al directorio de carga original.


0

De acuerdo, tuve los mismos problemas y esto es lo que funcionó y lo que no:

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"/>*

0

Si bien muchas de las respuestas anteriores dan formas de incrustar una imagen usando un archivo o con código Python, ¡hay una manera de incrustar una imagen en el cuaderno jupyter usando solo markdown y base64!

Para ver una imagen en el navegador, puede visitar el enlace data:image/png;base64,**image data here**de una imagen PNG codificada en base64, odata:image/jpg;base64,**image data here** una imagen JPG codificada en base64. Un enlace de ejemplo se puede encontrar al final de esta respuesta.

Para incrustar esto en una página de rebajas, simplemente use una construcción similar a la que responde el archivo, pero con un enlace base64 en su lugar: ![**description**](data:image/**type**;base64,**base64 data**) . ¡Ahora su imagen está 100% incrustada en su archivo Jupyter Notebook!

Enlace de ejemplo: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

Ejemplo de rebaja: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.