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

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

¡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

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

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

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

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

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

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.

Así es como puedes hacerlo con Markdown:

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

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)

3. 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

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.

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

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.

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

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