Inserir imagem na marcação do notebook IPython


216

Estou começando a depender muito do aplicativo de notebook IPython para desenvolver e documentar algoritmos. Isso é incrível; mas há algo que parece ser possível, mas não consigo descobrir como fazê-lo:

Gostaria de inserir uma imagem local na minha marcação de bloco de notas IPython (local) para ajudar na documentação de um algoritmo. Eu sei o suficiente para adicionar algo parecido <img src="image.png">com a remarcação, mas isso é tanto quanto o meu conhecimento vai. Suponho que eu poderia colocar a imagem no diretório representado por 127.0.0.1:8888 (ou algum subdiretório) para poder acessá-lo, mas não consigo descobrir onde esse diretório está. (Estou trabalhando em um Mac.) Então, é possível fazer o que estou tentando fazer sem muita dificuldade?

Respostas:


200

Os arquivos dentro do diretório do notebook estão disponíveis em uma URL "files /". Portanto, se estiver no caminho base, seria <img src="files/image.png">, e subdiretórios etc. também estão disponíveis:, <img src="files/subdir/image.png">etc.

Atualização : a partir do IPython 2.0, o files/prefixo não é mais necessário (consulte as notas de versão ). Então agora a solução <img src="image.png">simplesmente funciona como esperado.


3
Ah, você provavelmente está usando 0,12, não está? Atualmente, a veiculação de arquivos locais está disponível apenas no mestre. E sim, o "diretório do notebook" é o diretório com os notebooks (arquivos .ipynb).
Minrk

107
Desde que você está em remarcação, por que não usar ![caption](files/image.png)?
Kynan

4
@ minrk: não funciona para mim. Coloquei "<img src =" k.png ">", mas ele não mostra nada. O arquivo k.png está na mesma pasta do arquivo do notebook.
Abid Rahman K

4
Por favor, leia novamente a resposta e os comentários. Seu URL sempre começará com 'arquivos /'; portanto, se você tiver k.pngpróximo ao seu notebook, o URL será src="files/k.png".
Minrk

2
você precisa atualizar uma página da Web para que as imagens em um determinado URL sejam recarregadas.
Minrk

229

A maioria das respostas dadas até agora segue na direção errada, sugerindo carregar bibliotecas adicionais e usar o código em vez da marcação. Nos notebooks Ipython / Jupyter, é muito simples. Verifique se a célula está realmente na marcação e para exibir uma imagem use:

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

Outra vantagem em comparação com os outros métodos propostos é que você pode exibir todos os formatos de arquivo comuns, incluindo jpg, png e gif (animações).


Curioso para saber como você conhece esse comando. É exclusivo do Jupyter ou é alguma linguagem (formato de látex, talvez) que você esteja usando no Jupyter para adicionar a imagem?
Alex G

1
@ Alex G, o Markdown é uma linguagem com sintaxe de formatação de texto simples projetada para que possa ser convertida em HTML e em muitos outros formatos. O Markdown é frequentemente usado para criar rich text usando um editor de texto sem formatação. Confira o link abaixo para saber a sintaxe: github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
Philipp Schwarz

@PhilippSchwarz, existem algumas opções no seu exemplo acima para controlar o tamanho da imagem 'colada'? Usando a <img...>tag, essas opções aparecem aproximadamente assim <img ... width="480">.
Reb.Cabin

1
Usando isso, não funcionou. O notebook estava procurando em um local específico / notebooks / <meu caminho de trabalho anexado aqui> - certamente isso não é raiz - e o caminho local não existia. Achei útil usar apenas a imagem de inserção do notebook - que adicionou a imagem como um anexo (que agora é portátil).
Mark

2
Existe alguma maneira de usar esse método com arquivos de imagem com espaço em seus nomes?
Zebralamy

78

Eu estou usando o ipython 2.0, então apenas duas linhas.

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

25
Essa é a maneira correta de exibir uma imagem em uma célula de código . A resposta do minrk é a maneira correta de exibir uma imagem em uma célula de remarcação .
Mike

3
Usando notebook jupyter 4.2.0, ele não mostra a imagem a não ser que eu chamo displaytambém: from IPython.display import Image, display; display(Image(filename='output1.png'))
Matteo T.

22

[Obsoleto]

O IPython / Jupyter agora tem suporte para módulos de extensão que podem inserir imagens via copiar e colar ou arrastar e soltar.

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

A extensão arrastar e soltar parece funcionar na maioria dos navegadores

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

Mas copiar e colar funciona apenas no Chrome.


1
Esta resposta precisa de alguns votos positivos. Muito poucos sabem sobre extensões Ipython.
Thoran

apenas tentei drag'n'drop no Safari e Chrome, não funciona para mim (OSX, PY3, todas as atualizações)
K.-Michael Aye

2
O segundo link que você postou está quebrado - a extensão não é mais suportada?
Zthomas.nc 12/12

Também não consigo mais encontrar a extensão.
Yerforkferchips

Sim, Jupyter avançou um pouco nos últimos três anos e esta resposta é bastante obsoleta.
Mike

18

Colocar uma imagem no Jupyter NB é uma operação muito mais simples do que a maioria das pessoas aludiu aqui.

1) Simplesmente crie uma célula Markdown vazia. 2) Em seguida, arraste e solte o arquivo de imagem na célula Markdown vazia.

O código Markdown que inserirá a imagem será exibido.

Por exemplo, uma sequência mostrada destacada em cinza abaixo aparecerá na célula Jupyter:

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

3) Em seguida, execute a célula Markdown pressionando Shift-Enter. O servidor Jupyter inserirá a imagem e a imagem será exibida.

Estou executando o servidor notebook Jupyter: 5.7.4 com Python 3.7.0 no Windows 7.

Isso é tão simples !!


2
Esta é realmente a melhor solução que encontrei !!
GCGM 18/10/19

Infelizmente, esse método não funciona quando o Jupyter Notebook versão 6.0 está hospedado no Google Cloud. Alguém tem uma solução alternativa que funcione sem privilégios de administrador, algo além de instalar o nbextension de arrastar e soltar?
Rich Lysakowski PhD 24/03

13

Coloquei o notebook IPython na mesma pasta da imagem. Eu uso o Windows. O nome da imagem é "phuong huong xac dinh.PNG".

Em Markdown:

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

Código:

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

1
referência de documentação ipython.readthedocs.io/en/stable/api/generated/… , embora use markdown ( ![alt text](foo.png "the title")é imho preferível, a menos que seja necessário o uso de argumentos adicionais da API).
michael

9

Primeiro, verifique se você está no modelo de edição de descontos na célula do notebook ipython

Esta é uma maneira alternativa ao método proposto por outros <img src="myimage.png">:

![title](img/picture.png)

Também parece funcionar se o título estiver ausente:

![](img/picture.png)

Observe que nenhuma cotação deve estar no caminho. Não tenho certeza se isso funciona para caminhos com espaços em branco!


1
Para mim, as imagens com espaços em branco no nome não estavam sendo renderizadas no caderno. Tirei os espaços, sou capaz de ver agora.
Insanely_sin

9

A última versão do notebook jupyter aceita copiar / colar imagens de forma nativa


Eu prefiro essa opção, pois ela incorpora a imagem no binário do notebook. Isso torna o notebook mais pesado, mas você não precisa manter a imagem no caminho relativo.
Tulio Casagrande

8

Se você deseja exibir a imagem em uma célula Markdown , use:

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

Se você deseja exibir a imagem em uma célula de código , use:

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

Na célula de remarcação, para mim, funciona sem as vírgulas:<img src="files/image.png" width=800 height=400>
aerijman

é verdade que vírgulas não são necessárias nos comandos HTML. veja minha atualização
seralouk 08/08/19

5

Altere o bloco padrão de "Código" para "Markdown" antes de executar este código:

![<caption>](image_filename.png)

Se o arquivo de imagem estiver em outra pasta, você pode fazer o seguinte:

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

4

Para aqueles que procuram onde colocar o arquivo de imagem na máquina Jupyter para que possa ser mostrado no sistema de arquivos local.

Eu coloquei o meu mypic.pngem

/root/Images/mypic.png

(que é a pasta Imagens que aparece no navegador de arquivos online do Jupyter)

Nesse caso, preciso colocar a seguinte linha na célula Markdown para fazer minha foto aparecer no bloco de notas:

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

2

a resposta de minrk está certa.

No entanto, descobri que as imagens apareciam quebradas no Print View (na minha máquina Windows executando a distribuição Anaconda do IPython versão 0.13.2 em um navegador Chrome)

A solução alternativa para isso foi usar <img src="../files/image.png"> lugar.

Isso fez com que a imagem aparecesse corretamente no modo de impressão e no modo de edição normal do iPython.

ATUALIZAÇÃO: a partir da minha atualização para o iPython v1.1.0, não há mais necessidade dessa solução alternativa, pois a visualização de impressão não existe mais. Na verdade, você deve evitar essa solução alternativa, pois impede que a ferramenta nbconvert encontre os arquivos.


-3

Você pode encontrar seu diretório de trabalho atual com o comando 'pwd' no notebook jupyter sem aspas.

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.