ज्यूपिटर नोटबुक में छवि या तस्वीर कैसे एम्बेड करें, या तो स्थानीय मशीन से या वेब संसाधन से?

Question

मैं इमेज को जूपिटर नोटबुक में शामिल करना चाहूंगा।

अगर मैंने निम्नलिखित किया, तो यह काम करता है:

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

लेकिन मैं छवियों को एक मार्कडाउन सेल में शामिल करना चाहूंगा और निम्नलिखित कोड 404 त्रुटि देता है:

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

मैंने भी कोशिश की

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

लेकिन मुझे अभी भी वही त्रुटि मिलती है:

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

Answer 1

आपको मार्कडाउन में छवि फ़ाइलों के नाम के आसपास उद्धरण चिह्नों का उपयोग नहीं करना चाहिए!

यदि आप अपने त्रुटि संदेश को ध्यान से पढ़ते हैं, तो आपको %22लिंक में दो भाग दिखाई देंगे । यह html एन्कोडेड उद्धरण चिह्न है।

आपको लाइन बदलनी होगी

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

सेवा

![title](img/picture.png)

अपडेट करें

यह माना जाता है, कि आपके पास निम्न फ़ाइल संरचना है और यह कि आप jupyter notebookउस डायरेक्टरी में कमांड को चलाते हैं जहाँ फ़ाइल example.ipynb(<- इमेज के लिए मार्कडाउन है) संग्रहीत है:

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

Comments

मेरे लिए, यह HTML के रूप में नोटबुक डाउनलोड करते समय काम नहीं करता है। यह एक टूटी हुई छवि लिंक दिखाता है। IPython.display.Imageअपेक्षा के अनुसार कार्यों का उपयोग करना ।

— joelostblom

@cheflo उपरोक्त सिंटैक्स html फ़ाइल में छवि को एम्बेड नहीं करता है । यदि आप html फ़ाइल के सोर्सकोड में देखते हैं, तो आपको <img src = "img / picture.png" alt = "title"> जैसी प्रविष्टि मिलेगी। तस्वीर को देखने के लिए आपको इसे imgHTML फ़ाइल में फ़ोल्डर relativ में कॉपी करना होगा ।

— सेबस्टियन स्टिगलर

मुझे संदेह था कि मामला स्पष्ट करने के लिए धन्यवाद। मुझे लगा कि दोनों दृष्टिकोणों के बीच यह अंतर अप्रत्याशित था और कम से कम मेरे लिए, यह निर्धारित करना कि कौन सा चुनना है, इसलिए मैं इस पर ध्यान दिलाना चाहता था।

— joelostblom

मार्कडाउन के माध्यम से इसे करते समय, सुनिश्चित करें कि इमेज फ़ाइल उसी डायरेक्टरी में है जिसमें आपकी नोटबुक निहित है, किसी अजीब कारण से (मेरे मामले में), ज्यूपिटर-नोटबुक को पूर्ण पथ पर कार्य करने के लिए आश्वस्त नहीं किया गया था ... ![title](picture.png)

— अरुण कुमार खत्री 21

@ArunKumarKhattri - एक ही मुद्दा था, केवल नोटबुक में काम करने का पथ - मेरे मामले में: - [शीर्षक] (../ img / picture.png)

— ohad edelstain

Answer 2

Jupyter पुस्तिकाओं में छवि पोस्ट करने के कई तरीके हैं:

HTML के माध्यम से:

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

आप HTML टैग्स को आकार बदलने के लिए उपयोग करने की क्षमता, आदि ...

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

आप स्थानीय रूप से संग्रहीत छवियों को भी प्रदर्शित कर सकते हैं, या तो रिश्तेदार या निरपेक्ष पथ के माध्यम से।

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

यदि यह छवि प्रदर्शन सेटिंग्स से अधिक व्यापक है: धन्यवाद

unconfined=Trueछवि की अधिकतम-चौड़ाई को अक्षम करने के लिए उपयोग करें

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

या मार्कडाउन के माध्यम से:

• सुनिश्चित करें कि सेल एक मार्कडाउन सेल है, और कोड सेल नहीं है, धन्यवाद @ 凯 超 超 टिप्पणियों में)
• कृपया ध्यान दें कि कुछ प्रणालियों पर, मार्कडाउन फ़ाइल नाम में सफेद स्थान की अनुमति नहीं देता है। @ कॉफ़ीटेबल ईस्प्रेसो और कमेंट्स में @zebralamy की बदौलत)
  ( मैकोस , जब तक आप मार्कडाउन सेल पर हैं, आप ऐसा करेंगे: ![title](../image 1.png)और व्हाइट स्पेस की चिंता नहीं करेंगे)।

एक वेब छवि के लिए:

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

जैसा कि @cristianmtr द्वारा दिखाया गया है ध्यान दें कि ये उद्धरण ""या ''url के आसपास के लोगों का उपयोग न करें ।

या एक स्थानीय एक:

![title](img/picture.png)

@ सेबैस्टियन द्वारा प्रदर्शित किया गया

Comments

यह सच है कि, चित्र का आकार बदलने की संभावना दिलचस्प है। लेकिन भविष्य के प्रतिपादन के लिए, मार्कडाउन मेरे लिए बेहतर है।

— जेर

क्या आप मार्कडाउन के माध्यम से किसी स्थानीय को निरपेक्ष मार्ग पर रख सकते हैं? मैंने कोशिश की, लेकिन यह काम नहीं कर रहा है। संपादित करें: फ़ायरफ़ॉक्स (और क्रोम) सुरक्षा के लिए स्थानीय फ़ाइलों तक पहुंच की अनुमति नहीं देता है

— सिप्रियन टॉमोयागॉ

@SwimBikeRun आपको सही सेल प्रकार का चयन करना चाहिए। आपका वर्तमान सेल प्रकार कोड

— youkaichao

अधूरा जवाब। बहुत अच्छी तरह से

— नाथन

मार्कडाउन संस्करण फ़ाइल नामों में रिक्त स्थान की अनुमति नहीं देता है, किसी को भी उस समस्या में चलने के लिए

— CoffeeTableEspresso

Answer 3

वैकल्पिक रूप से, आप एक सादे HTML का उपयोग कर सकते हैं <img src>, जो आपको ऊँचाई और चौड़ाई बदलने की अनुमति देता है और अभी भी मार्कडाउन दुभाषिया द्वारा पढ़ा जाता है:

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

Comments

महान! हम इस जवाब को बहुत पसंद करते हैं क्योंकि हमारे पास आउटपुट आकार पर नियंत्रण है! उदाहरण के लिए यह महत्वपूर्ण है कि ज्यूपिटर नोटबुक को स्थिर HTML पृष्ठों के रूप में प्रकाशित करने के लिए श्रोणि उपकरण का उपयोग किया जाए।

— स्वेन्द

HTML को अल्पविराम की आवश्यकता नहीं है - बस अपनी विशेषताओं के बीच एक स्थान रखें - और यह सभी विशेषता मानों के आसपास उद्धरण देने के लिए अनुशंसित है, उदा width="60"।

— कॉलिन

पवित्र श * त। यह सुपर कमाल है

— Tessaracter

हाँ यह कमाल है :) लेकिन ... छवि पीडीएफ संस्करणों में खो गई है। बहुत बुरा।

— बबौ

Answer 4

मुझे पता है कि यह पूरी तरह से प्रासंगिक नहीं है, लेकिन चूंकि यह उत्तर पहले कई बार रैंक किया गया है जब आप खोज करते हैं कि ' ज्यूपिटर में चित्र कैसे प्रदर्शित करें' , तो कृपया इस उत्तर पर भी विचार करें।

आप इस प्रकार के रूप में एक छवि दिखाने के लिए matplotlib का उपयोग कर सकते हैं।

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

Answer 5

मुझे आश्चर्य है कि यहां किसी ने भी html सेल मैजिक विकल्प का उल्लेख नहीं किया है। से डॉक्स (IPython, लेकिन Jupyter के लिए एक ही)

%% एचटीएमएल

Render the cell as a block of HTML

Answer 6

HTML का उपयोग करने वाले अन्य उत्तरों के अलावा (या तो मार्कडाउन में या %%HTMLजादू का उपयोग करते हुए :

यदि आपको छवि ऊंचाई निर्दिष्ट करने की आवश्यकता है, तो यह काम नहीं करेगा:

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

ऐसा इसलिए है क्योंकि Jupyter में CSS स्टाइलिंग height: autoप्रति imgटैग के लिए डिफ़ॉल्ट रूप से उपयोग करता है , जो HTML ऊंचाई विशेषता को ओवरराइड करता है। आपको heightइसके बजाय CSS विशेषता को अधिलेखित करने की आवश्यकता है :

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

Answer 7

इमेज को सीधे जूपिटर नोटबुक में डालें।

नोट: आपके पास अपने कंप्यूटर पर छवि की एक स्थानीय प्रति होनी चाहिए

आप ज्यूपिटर नोटबुक में ही छवि सम्मिलित कर सकते हैं। इस तरह आपको छवि को फ़ोल्डर में अलग से रखने की आवश्यकता नहीं है।

कदम:

1. सेल को इसके markdownद्वारा परिवर्तित करें :

   • चयनित सेल पर एम दबाकर
     या
     
   • मेनू बार से, सेल> सेल प्रकार> मार्कडाउन।
     ( नोट: सेल को मार्कडाउन में बदलना महत्वपूर्ण है, अन्यथा चरण 2 में "इंसर्ट इमेज" विकल्प सक्रिय नहीं होगा)

2. अब मेनू बार में जाएं और Edit -> Insert Image चुनें।

3. अपनी डिस्क से छवि का चयन करें और अपलोड करें।

4. Ctrl+ Enterया Shift+ दबाएं Enter।

यह छवि को नोटबुक के हिस्से के रूप में बना देगा और आपको निर्देशिका या जीथब में अपलोड करने की आवश्यकता नहीं है। मुझे लगता है कि यह अधिक साफ दिखता है और टूटी हुई URL समस्या से ग्रस्त नहीं है।

Comments

मुझे बचाया !, धन्यवाद

— मोहम्मद हैदरी

फिर भी देवों द्वारा जोड़ा गया एक और सहायक कार्यक्षमता Jupyter। नोट करने के लिए एक नुकसान, ऐसे मामलों के लिए जब यह मायने रखता है: यह IPyNB Jasonकोड में छवि को शामिल करेगा , इस प्रकार इसे बहुत बड़ा बना देगा और कोड संशोधन के अनुकूल नहीं होगा (उदाहरण के लिए जब निरीक्षण diffएस)।

— एल्डड-एक

Answer 8

यहाँ आप इसे Markdown के साथ कैसे कर सकते हैं:

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

Comments

कुछ कारणों से, मार्कडाउन के माध्यम से छवियों को प्रदर्शित करना मेरे लिए काम नहीं करता है ... क्या आप सुनिश्चित हैं कि वाक्यविन्यास सही cristianmtr है?

— रेब्लोचोन मस्के

हाँ, बस इसे फिर से परीक्षण किया। क्या आप निश्चित हैं कि आपने सेल को मार्कडाउन पर सेट किया है? इसके अलावा, IPython / Jupyter के किस संस्करण का आप उपयोग कर रहे हैं? मेरा कहता है: "नोटबुक सर्वर का संस्करण 4.0.4 है और इस पर चल रहा है: पायथन 2.7.8 (डिफ़ॉल्ट, Jun 30 2014, 16:08:48) [MSC v.1500 64 बिट (AMD64)]" यहाँ है परिणामों के साथ स्क्रीनशॉट: i.imgur.com/4ISJFDE.png

— cristianmtr

रास्तों से सावधान रहें, जो स्थानीय रूप से काम करता है वह ऑनलाइन काम नहीं करता है, .e imgs \ pic.png स्थानीय रूप से काम करता है, जबकि ऑनलाइन यह 1 है: केस सेंसिटिव (Pic.png) 2: बैकस्लैच और स्लैश समान नहीं हैं ...: - / -

— इंटेलिजेंट-इन्फ्रास्ट्रक्चर

पायथन 3.8 में महान काम करता है। धन्यवाद

— jamescampbell

— मार्कडाउन के

Answer 9

1. मार्कडाउन के लिए सेल मोड सेट करें
2. अपनी छवि को सेल में खींचें और छोड़ें। निम्नलिखित कमांड बनाई जाएगी:

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

3. सेल को निष्पादित / चलाएं और छवि दिखाई दे।

छवि वास्तव में ipynb नोटबुक में अंतर्निहित है और आपको अलग-अलग फ़ाइलों के साथ गड़बड़ करने की आवश्यकता नहीं है। यह दुर्भाग्य से जुपिटर-लैब (v। 1.1.4) के साथ अभी तक काम नहीं कर रहा है।

संपादित करें: JupyterLab संस्करण 1.2.6 में काम करता है

Comments

जब मैं एचटीएमएल के रूप में डाउनलोड करना चाहता हूं तो हां बल्लेबाजी करते हैं, मुझे त्रुटि मिलती है "nbconvert विफल: लापता लगाव: कल्पना। पीएनजी"। क्यों?

— efueyo

क्लिपबोर्ड से एक छवि पेस्ट करना मेरे लिए भी काम करता है (सेल मोड सेट करने के बाद Markdown)

— CgodLEY

Answer 10

यदि आप Jupyter Notebook API (और अब IPython नहीं) का उपयोग करना चाहते हैं, तो मुझे ipywidgets Jupyter का उप-प्रोजेक्ट लगता है। आपके पास एक Imageविजेट है। डॉकस्ट्रिंग निर्दिष्ट करता है कि आपके पास एक valueपैरामीटर है जो बाइट्स है। तो आप कर सकते हैं:

import requests
from ipywidgets import Image

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

मैं सहमत हूं, मार्कडाउन शैली का उपयोग करना सरल है। लेकिन यह आपको इमेज डिस्प्ले नोटबुक एपीआई दिखाता है। आप मापदंडों widthऔर heightमापदंडों के साथ छवि का आकार भी बदल सकते हैं ।

Comments

ऐसा लगता है कि इस बीच विकल्प valueका नाम बदल दिया गया data। स्थानीय रूप से संग्रहीत छवि के लिए कोड Image(data=open(filename_png, 'rb').read())ने मेरे लिए काम किया।

— 21

Answer 11

यहाँ बृहस्पति और अजगर के लिए एक समाधान है :

मैंने एक फ़ोल्डर में अपनी छवियों को छोड़ दिया ImageTest। मेरी निर्देशिका है:

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

छवि दिखाने के लिए मैंने इस अभिव्यक्ति का उपयोग किया:

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

इसके लिए भी देखें /और\

Comments

यह केवल मेरे लिए काम करता है। धन्यवाद! "ShowMyImage" एक आकर्षण की तरह काम करता है!

— प्रांजल

Answer 12

यह मेरे लिए एक मार्कडाउन सेल में काम करता है। किसी तरह मैं विशेष रूप से उल्लेख करने की जरूरत नहीं है अगर इसकी एक छवि या एक साधारण फ़ाइल।

![](files/picture.png)

Comments

यह सेबस्टियन स्टिगलर के जवाब से कैसे अलग है?

— INet

बस यह उजागर करना चाहता था कि यह मेरे लिए बगैर शीर्षक के ब्रैकेट में शामिल किए बिना काम करता है। कुछ भी अलग नहीं।

— प्रणव पंडित

Answer 13

एक चीज जो मुझे मिली है वह यह है कि आपकी छवि का पथ उस जगह के सापेक्ष होना चाहिए जहां से मूल रूप से नोटबुक लोड की गई थी। यदि आप किसी भिन्न निर्देशिका में सीडी करते हैं, जैसे कि चित्र आपका मार्कडाउन पथ अभी भी मूल लोडिंग निर्देशिका के सापेक्ष है।

Answer 14

सहमत, मेरे पास एक ही मुद्दे थे और यही काम किया और क्या नहीं किया:

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

Answer 15

जबकि ऊपर दिए गए बहुत सारे उत्तर किसी फ़ाइल का उपयोग करके या पाइथन कोड के साथ छवि को एम्बेड करने के तरीके देते हैं, वहीं ज्यूपिटर नोटबुक में एक छवि को केवल मार्कडाउन और बेस 64 का उपयोग करके एम्बेड करने का एक तरीका है!

ब्राउज़र में एक छवि देखने के लिए, आप data:image/png;base64,**image data here**बेस 64-एन्कोडेड PNG छवि के लिए लिंक पर जा सकते हैं , याdata:image/jpg;base64,**image data here** बेस64 एनकोडेड जेपीजी छवि के लिए। इस उत्तर के अंत में एक उदाहरण लिंक पाया जा सकता है।

इसे एक मार्कडाउन पेज में एम्बेड करने के लिए, बस फ़ाइल के उत्तर के समान निर्माण का उपयोग करें, लेकिन इसके बजाय आधार 64 लिंक के साथ ![**description**](data:image/**type**;base64,**base64 data**):। अब आपकी छवि आपकी Jupyter Notebook फाइल में 100% एम्बेडेड है!

उदाहरण लिंक: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==

उदाहरण मार्कडाउन: ![smile](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAD9JREFUGJW1jzEOADAIAqHx/1+mE4ltNXEpI3eJQknCIGsiHSLJB+aO/06PxOo/x2wBgKR2jCeEy0rOO6MDdzYQJRcVkl1NggAAAABJRU5ErkJggg==)