Como incorporar imagem ou imagem no notebook jupyter, de uma máquina local ou de um recurso da web?


304

Eu gostaria de incluir uma imagem em um caderno jupiter.

Se eu fiz o seguinte, funciona:

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

Mas eu gostaria de incluir as imagens em uma célula de remarcação e o código a seguir fornece um erro 404:

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

Eu também tentei

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

Mas ainda recebo o mesmo erro:

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

Respostas:


306

Você não deve usar aspas ao redor do nome dos arquivos de imagem na lista de descontos!

Se você ler atentamente sua mensagem de erro, verá as duas %22partes no link. Essa é a aspas codificadas em html.

Você tem que mudar de linha

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

para

![title](img/picture.png)

ATUALIZAR

Supõe-se que você possua a seguinte estrutura de arquivos e execute o jupyter notebookcomando no diretório em que o arquivo example.ipynb(<- contém a redução da imagem) está armazenado:

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

8
Para mim, isso não funciona ao baixar o notebook como html. Ele mostra um link de imagem quebrado. Usando IPython.display.Imagefunciona como esperado.
Joelostblom

7
@cheflo A sintaxe acima não incorpora a imagem no arquivo html. Se você procurar o código-fonte do arquivo html, encontrará uma entrada como <img src = "img / picture.png" alt = "title">. Para ver a imagem, você deve copiá-la na pasta relativa imgao arquivo html.
Sebastian Stigler 15/02

1
Suspeitei que fosse esse o caso, obrigado por esclarecer. Eu pensei que essa diferença entre as duas abordagens era inesperada e, pelo menos para mim, determinou qual escolher, então eu queria chamar a atenção.
Joelostblom 15/02

3
ao fazê-lo através de descontos, verifique se o arquivo de imagem está no mesmo diretório em que o seu notebook está, por algum motivo estranho (no meu caso), o jupyter-notebook não foi convencido a agir no caminho completo ... ![title](picture.png)
Arun Kumar Khattri,

2
@ArunKumarKhattri - tive o mesmo problema, único caminho reletive ao notebook trabalhava - no meu caso: [título] (../ img / picture.png)
Ohad edelstain

210

Existem várias maneiras de postar uma imagem nos blocos de anotações Jupyter:

via HTML:

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

Você mantém a capacidade de usar tags HTML para redimensionar, etc ...

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

Você também pode exibir imagens armazenadas localmente, via caminho relativo ou absoluto.

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

se a imagem for mais larga que as configurações de exibição: obrigado

use unconfined=Truepara desativar o confinamento de largura máxima da imagem

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

ou via remarcação:

  • verifique se a célula é uma célula de remarcação e não uma célula de código, obrigado @ 游 游 超 nos comentários)
  • Observe que em alguns sistemas, a redução não permite espaços em branco nos nomes de arquivos. Graças a @CoffeeTableEspresso e @zebralamy nos comentários)
    (no macos, desde que você esteja em uma célula de remarcação, você faria assim: ![title](../image 1.png)e não se preocupe com o espaço em branco).

para uma imagem da web:

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

como mostrado por @cristianmtr Preste atenção para não usar essas aspas ""ou aquelas em ''torno do URL.

ou local:

![title](img/picture.png)

demonstrado por @Sebastian


É verdade que a possibilidade de redimensionar a imagem é interessante. Mas para renderização futura, a redução é melhor para mim.
Ger

3
você pode colocar um local com caminho absoluto, via remarcação? Eu tentei, mas não parece funcionar. Edit: Firefox (e Chrome) não permitem acesso a arquivos locais por segurança
Ciprian Tomoiagă

2
@SwimBikeRun, você deve selecionar o tipo de célula correto. seu tipo de célula atual deve ser código
youkaichao

1
Resposta subestimada. Muito completo
Nathan

1
a versão de remarcação não permite espaços nos nomes dos arquivos, para quem se deparar com esse problema
CoffeeTableEspresso

58

Como alternativa, você pode usar um HTML simples <img src>, que permite alterar a altura e a largura e ainda é lido pelo interpretador de descontos:

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

3
Ótimo! Eu prefiro muito essa resposta, já que temos o controle sobre o tamanho da saída! Isso é importante, por exemplo, ao usar a ferramenta pelican para publicar o caderno jupyter como páginas estáticas de html.
Svend

7
O HTML não precisa de vírgulas - basta colocar um espaço entre seus atributos - e é recomendável colocar aspas em torno de todos os valores de atributos, por exemplo width="60".
colllin

Puta merda. Este é super incrível
Tessaracter

Sim, é incrível :) mas ... a imagem é perdida nas versões em PDF. Que pena.
babou 9/06

21

Eu sei que isso não é totalmente relevante, mas como essa resposta é classificada primeiro muitas vezes quando você pesquisa ' como exibir imagens no Jupyter ', considere esta resposta também.

Você pode usar o matplotlib para mostrar uma imagem da seguinte maneira.

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

19

Estou surpreso que ninguém aqui tenha mencionado a opção de mágica em células html. dos documentos (IPython, mas o mesmo para Jupyter)

%% html

Render the cell as a block of HTML

19

Além das outras respostas usando HTML (no Markdown ou usando a %%HTMLmágica:

Se você precisar especificar a altura da imagem, isso não funcionará:

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

Isso ocorre porque o estilo CSS no Jupyter usa height: autopor padrão as imgtags, que substituem o atributo de altura HTML. Você precisa substituir o heightatributo CSS :

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

19

Insira a imagem diretamente no notebook Jupyter.

Nota: Você deve ter uma cópia local da imagem no seu computador

Você pode inserir a imagem no próprio notebook Jupyter. Dessa forma, você não precisa manter a imagem separadamente na pasta.

Passos:

  1. Converta a célula em markdown:

    • pressionando M na célula selecionada
      OU
    • Na barra de menus, Célula> Tipo de célula> Remarcação.
      ( Observação: é importante converter a célula em Markdown, caso contrário, a opção "Inserir imagem" na etapa 2 não estará ativa)
  2. Agora vá para a barra de menus e selecione Editar -> Inserir imagem.

  3. Selecione a imagem do seu disco e faça o upload.

  4. Pressione Ctrl+ Enterou Shift+ Enter.

Isso fará com que a imagem faça parte do caderno e você não precisará fazer o upload no diretório ou no Github. Sinto que isso parece mais limpo e não propenso a problemas de URL corrompidos.


Saved me !, Thanks
Mohammad Heydari

Ainda outra funcionalidade útil adicionada pelos desenvolvedores de Jupyter. Uma desvantagem a ser observada, nos casos em que isso importa: incluiria a imagem no IPyNB Jasoncódigo, tornando-a muito maior e não como uma revisão amigável do código (por exemplo, ao inspecionar diffs).
eldad-a 30/04

13

Veja como você pode fazer isso com o Markdown:

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

1
Por alguns motivos, exibir imagens via markdown não funciona para mim ... Você tem certeza de que a sintaxe está correta cristianmtr?
Reblochon Masque

1
Sim, apenas testei novamente. Tem certeza de que definiu a célula para Markdown? Além disso, qual versão do IPython / Jupyter você está usando? O meu diz: "A versão do servidor de notebook é 4.0.4 e está sendo executada em: Python 2.7.8 (padrão, 30 de junho de 2014, 16:08:48) [MSC v.1500 de 64 bits (AMD64)]" captura de tela com os resultados: i.imgur.com/4ISJFDE.png
cristianmtr

cuidado com os caminhos, o que funciona localmente não funciona on-line, .e. imgs \ pic.png funciona localmente, enquanto on-line é 1: case sensitve (Pic.png) 2: barra invertida e barra não são os mesmos ...: / -
Intelligent-Infrastructure

Funciona muito bem em Python 3.8. Obrigado
jamescampbell

Nenhum espaço é permitido no nome do arquivo para remarcação, caso alguém esteja com esse problema
CoffeeTableEspresso

12
  1. Defina o modo de célula como Markdown
  2. Arraste e solte sua imagem na célula. O seguinte comando será criado:

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

  1. Executar / Executar a célula e a imagem aparece.

A imagem é realmente incorporada no Notebook ipynb e você não precisa mexer em arquivos separados. Infelizmente, isso ainda não está funcionando com o Jupyter-Lab (v 1.1.4).

Edit: Funciona no JupyterLab versão 1.2.6


1
Sim, quando eu quero fazer o download como HTML incorporado, recebo o erro "nbconvert falhou: falta de anexo: imagen.png". Por quê?
efueyo 17/02

Colar uma imagem da área de transferência também funciona para mim (depois de definir o modo de célula para Markdown)
CgodLEY

10

Se você deseja usar a API do Jupyter Notebook (e não a IPython), acho o subprojeto do ipywidgets Jupyter. Você tem um Imagewidget. Docstring especifica que você tem um valueparâmetro que é um bytes. Então você pode fazer:

import requests
from ipywidgets import Image

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

Concordo, é mais simples usar o estilo Markdown. Mas mostra a API do Notebook para exibição de imagens. Você também pode redimensionar a imagem com os parâmetros widthe height.


Parece que a opção valuefoi renomeada datanesse meio tempo. Para uma imagem armazenada localmente, o código Image(data=open(filename_png, 'rb').read())funcionou para mim.
jottbe

7

Aqui está uma solução para Jupyter e Python3 :

Larguei minhas imagens em uma pasta chamada ImageTest. Meu diretório é:

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

Para mostrar a imagem, usei esta expressão:

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

Também atente /e\


Isso só funciona para mim. Obrigado! "ShowMyImage" funciona como um encanto!
Pranzell

4

Isso funciona para mim em uma célula de remarcação. De alguma forma, não preciso mencionar especificamente se é uma imagem ou um arquivo simples.

![](files/picture.png)

Como isso difere da resposta de Sebastian Stigler?
iNet

1
Só queria destacar que funcionou para mim sem incluir o título entre colchetes. Nada diferente.
Pranav Pandit

2

Uma coisa que descobri é que o caminho da sua imagem deve estar em relação a onde o notebook foi originalmente carregado. se você cdar para um diretório diferente, como Imagens, o caminho do Markdown ainda será relativo ao diretório de carregamento original.


0

Concordo, tive os mesmos problemas e é isso que funcionou e o que não funcionou:

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

Enquanto muitas das respostas acima oferecem maneiras de incorporar uma imagem usando um arquivo ou com código Python, há uma maneira de incorporar uma imagem no próprio notebook jupyter usando apenas markdown e base64!

Para visualizar uma imagem no navegador, você pode visitar o link data:image/png;base64,**image data here**para uma imagem PNG codificada em base64 oudata:image/jpg;base64,**image data here** em base64 para uma imagem JPG codificada em base64. Um link de exemplo pode ser encontrado no final desta resposta.

Para incorporar isso em uma página markdown, basta usar uma construção semelhante como as respostas de arquivo, mas com base64 ligar em vez disso: ![**description**](data:image/**type**;base64,**base64 data**). Agora sua imagem está 100% incorporada ao seu arquivo Jupyter Notebook!

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

Exemplo de remarcação: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.