Jak osadzić obraz lub obraz w notatniku jupyter, z lokalnego komputera lub z zasobu sieciowego?

Chciałbym dołączyć obraz do notatnika jupyter.

Jeśli zrobiłbym następujące, to działa:

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

Chciałbym jednak uwzględnić obrazy w komórce przeceny, a następujący kod podaje błąd 404:

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

Też próbowałem

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

Ale nadal pojawia się ten sam błąd:

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

Nie możesz używać cudzysłowów wokół nazw plików graficznych w przecenianiu!

Jeśli dokładnie przeczytasz komunikat o błędzie, zobaczysz dwie %22części w linku. To jest znak cudzysłowu zakodowany w formacie HTML.

Musisz zmienić linię

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

do

![title](img/picture.png)

AKTUALIZACJA

Zakłada się, że masz następującą strukturę plików i że uruchamiasz jupyter notebookkomendę w katalogu, w którym plik example.ipynb(<- zawiera znacznik dla obrazu):

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

Istnieje kilka sposobów na opublikowanie obrazu w notesach Jupyter:

przez HTML:

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

Zachowujesz możliwość używania znaczników HTML do zmiany rozmiaru itp.

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

Możesz także wyświetlać obrazy przechowywane lokalnie, albo ścieżką względną, albo bezwzględną.

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

jeśli obraz jest szerszy niż ustawienia wyświetlania: dzięki

Użyj, unconfined=Trueaby wyłączyć ograniczenie szerokości obrazu

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

lub poprzez obniżkę:

• upewnij się, że komórka jest komórką przeceny, a nie komórką kodu, dzięki @ 游 凯 超 w komentarzach)
• Pamiętaj, że w niektórych systemach przecena nie dopuszcza białych znaków w nazwach plików. Dzięki @CoffeeTableEspresso i @zebralamy w komentarzach)
  (Na komputerach Mac, tak długo, jak jesteś w komórce przeceny, robisz tak: ![title](../image 1.png)i nie martw się o białe znaki).

dla obrazu internetowego:

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

jak pokazuje @cristianmtr Zwracając uwagę, aby nie używać ani tych cytatów, ""ani tych ''wokół adresu URL.

lub lokalny:

![title](img/picture.png)

zademonstrowany przez @Sebastian

Alternatywnie możesz użyć zwykłego kodu HTML <img src>, który pozwala na zmianę wysokości i szerokości i jest nadal odczytywany przez interpretera znaków:

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

Wiem, że nie jest to w pełni istotne, ale ponieważ ta odpowiedź jest często umieszczana na pierwszym miejscu, gdy szukasz „ sposobu wyświetlania obrazów w Jupyter ”, również ją rozważ.

Możesz użyć matplotlib do wyświetlenia obrazu w następujący sposób.

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

Dziwię się, że nikt tutaj nie wspomniał o magicznej opcji komórki HTML. z dokumentów (IPython, ale to samo dla Jupyter)

%% html

Render the cell as a block of HTML

Oprócz innych odpowiedzi za pomocą HTML (w Markdown lub za pomocą %%HTMLmagii:

Jeśli musisz określić wysokość obrazu, to nie zadziała:

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

Wynika to z faktu, że styl CSS w Jupyter height: autodomyślnie używa imgtagów, co zastępuje atrybut wysokości HTML. Zamiast tego musisz zastąpić heightatrybut CSS :

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

Wstaw obraz bezpośrednio do notatnika Jupyter.

Uwaga: powinieneś mieć lokalną kopię obrazu na swoim komputerze

Możesz wstawić obraz do samego notatnika Jupyter. W ten sposób nie musisz przechowywać obrazu osobno w folderze.

Kroki:

1. Konwertuj komórkę na markdown:

   • naciskając M na wybranej komórce
     LUB
     
   • Z paska menu wybierz Komórka> Typ komórki> Markdown.
     ( Uwaga: ważne jest, aby przekonwertować komórkę na Markdown, w przeciwnym razie opcja „Wstaw obraz” w kroku 2 nie będzie aktywna)

2. Teraz przejdź do paska menu i wybierz Edycja -> Wstaw obraz.

3. Wybierz obraz z dysku i prześlij.

4. Naciśnij Ctrl+ Enterlub Shift+ Enter.

Spowoduje to, że obraz będzie częścią notebooka i nie musisz przesyłać do katalogu lub Github. Wydaje mi się, że to wygląda bardziej czysto i nie jest podatne na problemy z uszkodzonymi adresami URL.

Oto, jak możesz to zrobić za pomocą Markdown:

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

1. Ustaw tryb komórki na Markdown
2. Przeciągnij i upuść obraz do komórki. Zostanie utworzone następujące polecenie:

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

3. Uruchom / Uruchom komórkę, a pojawi się obraz.

Obraz jest w rzeczywistości osadzony w notatniku ipynb i nie trzeba się bawić z osobnymi plikami. To niestety nie działa jeszcze z Jupyter-Lab (wersja 1.1.4).

Edycja: Działa w JupyterLab wersja 1.2.6

Jeśli chcesz użyć interfejsu API Jupyter Notebook (a nie IPython), znajdę podprojekt ipywidgets Jupyter. Masz Imagewidżet. Docstring określa, że ​​masz valueparametr, który jest bajtem . Możesz więc zrobić:

import requests
from ipywidgets import Image

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

Zgadzam się, łatwiej jest używać stylu Markdown. Ale pokazuje ekran API do wyświetlania obrazów. Możesz także zmienić rozmiar obrazu za pomocą parametrów widthi height.

Oto rozwiązanie dla Jupyter i Python3 :

Upuściłem swoje zdjęcia w folderze o nazwie ImageTest. Mój katalog to:

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

Aby wyświetlić obraz, użyłem tego wyrażenia:

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

Uważaj również na /i\

To działa dla mnie w komórce przeceny. Jakoś nie muszę specjalnie wymieniać, czy jest to obraz, czy zwykły plik.

![](files/picture.png)

Jedną z rzeczy, które znalazłem, jest to, że ścieżka obrazu musi być względna w stosunku do miejsca, z którego notebook został pierwotnie załadowany. jeśli przechodzisz do innego katalogu, takiego jak Obrazy, twoja ścieżka Markdown jest nadal względem oryginalnego katalogu ładowania.

Zgodziłem się, miałem te same problemy i to działało, a co nie:

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

Podczas gdy wiele z powyższych odpowiedzi umożliwia osadzenie obrazu przy użyciu pliku lub kodu Python, istnieje sposób na osadzenie obrazu w samym notatniku jupyter przy użyciu tylko markdown i base64!

Aby wyświetlić obraz w przeglądarce, możesz odwiedzić łącze data:image/png;base64,**image data here**do obrazu PNG zakodowanego data:image/jpg;base64,**image data here**w standardzie base64 lub w formacie JPG zakodowanego w standardzie base64. Przykładowy link można znaleźć na końcu tej odpowiedzi.

Aby umieścić to na stronie wyprzedaży, wystarczy użyć podobną konstrukcję jak odpowiedziach plików, ale z base64 odwołują zamiast: ![**description**](data:image/**type**;base64,**base64 data**). Teraz Twój obraz jest w 100% osadzony w pliku Notatnika Jupyter!

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

Przykładowa przecena: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)