GitHub पर README.md में चित्र जोड़ें


1839

हाल ही में मैं GitHub में शामिल हुआ । मैंने वहां कुछ परियोजनाओं की मेजबानी की।

मुझे अपनी README फाइल में कुछ छवियों को शामिल करने की आवश्यकता है। मुझे नहीं पता कि ऐसा कैसे करना है।

मैंने इस बारे में खोज की, लेकिन मेरे पास सभी लिंक कुछ लिंक थे जो मुझे "वेब पर छवियों को होस्ट करने और README.md फ़ाइल में छवि पथ निर्दिष्ट करने" के लिए कहते हैं।

क्या किसी तीसरे पक्ष की वेब होस्टिंग सेवाओं पर छवियों को होस्ट किए बिना ऐसा करने का कोई तरीका है?



5
का डुप्लीकेट stackoverflow.com/questions/10189356/... जिसमें 2012 पोस्ट किया गया था
leetNightshade

86
ऑफ-टॉपिक नहीं, GitHub एक प्रोग्रामर का टूल है।
लांस रॉबर्ट्स

जवाबों:


1882

इस मार्कडाउन को आज़माएँ:

![alt text](http://url/to/img.png)

मुझे लगता है कि आप किसी छवि के कच्चे संस्करण से सीधे लिंक कर सकते हैं यदि यह आपके भंडार में संग्रहीत हो। अर्थात

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)


53
रिश्तेदार संबंध यहां एक महान उपयोग नहीं हैं, कल्पना करें कि आपके रीडमी को एनपीएम पर भी प्रदर्शित किया जाता है जो इस तरह से छवि को होस्ट नहीं करता है - इसे गिटहब से लिंक करने की आवश्यकता है। छवि srcs github.com डोमेन पर होनी चाहिए , न कि raw.github.com उपडोमेन और न कि raw.githubusercontent.com डोमेन पर।
ली क्रॉसले

4
मैं वास्तव में रिश्तेदार रास्तों के साथ जा रहा हूं (जो मेरे लिए केवल छवि फ़ाइल का नाम है क्योंकि मेरे पास सब कुछ है)। मैं README.md की 2 प्रतियाँ बना रहा था, एक स्थानीय स्थापना के लिए / usr / शेयर / प्रोजेक्टनेम / डॉक्स और एक github के लिए। अब, मैं दोनों के लिए एक ही README.md का उपयोग कर सकता हूं क्योंकि छवि फ़ाइल नाम दोनों मामलों में ठीक काम करता है। अगर मैं अपनी README के ​​कुछ हिस्सों की एक प्रति कहीं और पोस्ट करना चाहता हूं, तो मुझे या तो छवियों को कहीं और होस्ट करना होगा या रॉ में डालना होगा। Github.com url।
कॉलिन कीनन

14
GitHub स्वयं सापेक्ष पथ सुझाता है : help.github.com/articles/relative-links-in-readmes निरपेक्ष पथों का एक प्रमुख पहलू यह है कि यदि छवि को मास्टर में स्थानांतरित कर दिया जाता है, तो अन्य शाखाएं जो अभी भी पुराने URL को इंगित करती हैं, टूट जाएंगी।
जैक ओ'कॉनर

3
वर्तमान में सुझाए गए डोमेन काम नहीं करते हैं और लिंक इस तरह होना चाहिए:https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true
स्लाविक शंकरनको

423

आप जैसे रिश्तेदार रास्तों का उपयोग कर सकते हैं

![Alt text](relative/path/to/img.jpg?raw=true "Title")

15
हाँ। यह अब तक का सबसे आसान तरीका है जब तक आप प्रदर्शन के बारे में चिंतित नहीं होते। मैं ध्यान दूंगा कि यह निर्देशिका के सापेक्ष नहीं रेपो है , इसलिए यदि आपके पास if myimage.png ’के रूप में एक ही dir में 'about_pics.md' है तो मार्कअप है:![What is this](myimage.png)
रिच

5
यह एक भयानक समाधान है क्योंकि 1) यह 2 काम करता है) छवियों को एक स्थानीय दर्शक में भी दिखाया गया है, जिसमें इंटरनेट एक्सेस की कोई आवश्यकता नहीं है
Régis B.

2
@ आप प्रदर्शन के संबंध में अपनी टिप्पणी पर विस्तार कर सकते हैं। सापेक्ष पथ दृष्टिकोण के साथ कौन से प्रदर्शन मुद्दे हैं?
ली हेस

2
यह पथ किसके सापेक्ष है?
मंद

2
जैसा कि ली क्रॉसली ने कहा है, आपको रिश्तेदार लिंक से बचना चाहिए क्योंकि जब एनपीएम पर आपका रीडमे प्रदर्शित होता है तो वे टूट जाते हैं। इसके बजाय, github.com डोमेन पर "s? Sanitize = true" ध्वज के साथ छवि के लिए लिंक अगर छवि प्रारूप SVG जैसा कुछ है। इस SO उत्तर पर अधिक विवरण देखें: stackoverflow.com/a/16462143/6798201
AlienKevin

229
  • आप एक नया मुद्दा बना सकते हैं
  • इसमें चित्र अपलोड (खींचें और छोड़ें) करें
  • छवियों के URL को कॉपी करें और अपनी README.md फ़ाइल में पेस्ट करें।

यहाँ एक विस्तृत youTube वीडियो के बारे में विस्तार से बताया गया है:

https://www.youtube.com/watch?v=nvPOUdz5PL4


24
जहां तक ​​मैं समझता हूं कि आपको वास्तव में इस मुद्दे को बचाने की आवश्यकता नहीं है । इस तरह आपको वास्तव में इश्यू ट्रैकर में उन डमी टिकटों की आवश्यकता नहीं है। सवाल यह है कि यह एक "सुरक्षित" विधि है, जिसका अर्थ है कि अगर GitHub का पता चलेगा (कुछ समय बाद) कि छवि अनाथ है और इसलिए इसे GitHub CDN से हटा दें ??
पेट्र

2
इस जवाब ने मेरे लिए पूरी तरह से काम किया और रेपो के भीतर नए मुद्दे को बचाने की जरूरत नहीं थी। मैंने Youtube पर एक वीडियो पाया है जो बताता है कि विवरण में: youtube.com/watch?v=nvPOUdz5PL4
फ्रांसिसैनी कैम्पोस

1
यह जवाब काम करता है, और बहुत कम प्रयास की आवश्यकता होती है। समस्या को खारिज किया जा सकता है, लेकिन छवि के लिए URL बनी रहती है। : चित्र URL के रूप में है user-images.githubusercontent.com ...
Sabuncu

6
यह एक महान चाल है! लेकिन क्या किसी को @ पीटर के सवाल का जवाब पता है? क्या GitHub समय-समय पर उन छवियों को शुद्ध करेगा जो अनाथ हैं (अर्थात इसमें कोई समस्या नहीं है)?
जॉनी ओशिका

1
@ जॉनीओशिका मुझे संदेह है कि गितुब के बाहर किसी का भी निश्चित रूप से जवाब हो सकता है। यह निर्भर करता है कि "user-images.githubusercontent.com" का उपयोग किस लिए किया जाता है। यदि यह केवल टिप्पणियों के लिए अपलोड की गई छवियों के लिए है, तो यह प्रशंसनीय है कि वे लापता डेटा संबंध के लिए स्कैन कर सकते हैं और छवि को हटा सकते हैं। यदि इसकी अधिक सामान्य है, तो यह निश्चित रूप से निर्धारित करना मुश्किल हो सकता है कि फ़ाइल का कोई संदर्भ नहीं है, यह या तो कम्प्यूटेशनल रूप से महंगा है या यह निर्धारित करने के लिए चुनौतीपूर्ण है कि इसे बिना मुद्दों के हटाया जा सकता है।
yourbuddypal

127

यह उससे बहुत सरल है।

बस अपनी छवि को रिपॉजिटरी रूट पर अपलोड करें, और बिना किसी पथ के फ़ाइल नाम से लिंक करें, जैसे:

![Screenshot](screenshot.png)

10
नहीं, मुझे नहीं लगता कि git repo में स्क्रीनशॉट जोड़ना एक अच्छा अभ्यास है। विशेष रूप से जड़ पर नहीं। अहमद अजमी का जवाब बहुत बेहतर है
अरनौद पी

25
रूट पर नहीं, लेकिन आप इसे आसानी से docs/imagesया कभी भी अनुकूलित कर सकते हैं , छोटे png स्क्रीनशॉट ठीक हैं IMHO
क्रिस्टोफ़ रूसो

5
यह स्वीकृत समाधान, esp होना चाहिए। डॉक्स / ट्री /
माइक एलिस

उत्तम..!! अगर png किसी अन्य फ़ोल्डर में है। बस, "folderName / स्क्रीनशॉट.png" पथ जोड़ें
Soumen

मुझे आपका उत्तर मेरे मामले के लिए उपयोगी लगा: मैं गीतालाब पर हूँ और मैं logo.pngरेपो को अवतार देने के लिए रेपो के मूल में चित्रों का उपयोग करता हूँ । मैं इस तस्वीर को README.md में शामिल करना चाहता था।
avi.elkharrat

84

आप साधारण HTML टैग्स के साथ चित्र भी जोड़ सकते हैं :

<p align="center">
  <img src="your_relative_path_here" width="350" title="hover text">
  <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text">
</p>

1
जब आप एचटीएमएल टैग (एस) का उपयोग करते हैं, तो आप मार्कडाउन फ़ाइल के अंदर। इसे यूनिवर्सल डॉक्यूमेंट कन्वर्टर पंडोक द्वारा नजरअंदाज किया जाएगा ।
लोरम इप्सम डोलर

1
यह सबसे अच्छा है इसलिए इसे एक तरफ केंद्रित किया जा सकता है (छोटी छवियों के लिए, कम से कम)।
एलेक्सिस विल्के

आप सापेक्ष पथ कैसे निर्दिष्ट करते हैं? यह README.md (सभी मामलों में?) के सापेक्ष नहीं है।
फ्राइडेरब्लुमेले

55

पोस्ट किए गए कई समाधान मेरे स्वाद के लिए अधूरे हैं या नहीं।

  • Imgur की तरह एक बाहरी CDN श्रृंखला में एक और उपकरण जोड़ता है। भावहीन।
  • समस्या ट्रैकर में डमी मुद्दा बनाना एक हैक है। यह अव्यवस्था पैदा करता है और उपयोगकर्ताओं को भ्रमित करता है। यह एक कांटा, या GitHub बंद करने के लिए इस समाधान को स्थानांतरित करने के लिए एक दर्द है।
  • Gh-pages शाखा का उपयोग करने से URL भंगुर हो जाते हैं। Gh-page को बनाए रखने वाले प्रोजेक्ट पर काम करने वाले एक अन्य व्यक्ति को पता नहीं हो सकता है कि कुछ बाहरी इन छवियों के लिए मार्ग पर निर्भर करता है। Gh-Pages शाखा का GitHub पर एक विशेष व्यवहार है जो CDN छवियों की मेजबानी के लिए आवश्यक नहीं है।
  • संस्करण नियंत्रण में संपत्ति को ट्रैक करना एक अच्छी बात है। जैसे-जैसे एक परियोजना बढ़ती है और बदलती है, यह कई उपयोगकर्ताओं द्वारा परिवर्तनों को प्रबंधित और ट्रैक करने का एक अधिक स्थायी तरीका है।
  • यदि कोई छवि सॉफ़्टवेयर के एक विशिष्ट संशोधन पर लागू होती है, तो एक अपरिवर्तनीय छवि को लिंक करना बेहतर हो सकता है। इस तरह, अगर छवि को बाद में सॉफ़्टवेयर में परिवर्तनों को प्रतिबिंबित करने के लिए अद्यतन किया जाता है, तो कोई भी जो संशोधन की रीडमी को पढ़ता है, उसे सही छवि मिल जाएगी।

मेरा पसंदीदा समाधान, इस जिस्ट से प्रेरित है , विशिष्ट संशोधनों के लिए पर्मलिंक्स के साथ एक संपत्ति शाखा का उपयोग करना है ।

git checkout --orphan assets
git reset --hard
cp /path/to/cat.png .
git add .
git commit -m 'Added cat picture'
git push -u origin assets
git rev-parse HEAD  # Print the SHA, which is optional, you'll see below.

छवि के इस संशोधन के लिए एक "पर्मलिंक" का निर्माण करें, और इसे मार्कडाउन में लपेटें।

हालांकि, हाथ से प्रतिबद्ध SHA को देखना असुविधाजनक है, इसलिए, एक शॉर्टकट के रूप में एक वाई- फाई की अनुमति देने के लिए एक शॉर्टकट दबाएं क्योंकि यह help.github पृष्ठ कहता है।

हमेशा संपत्ति शाखा पर नवीनतम छवि दिखाने के लिए, बूँद URL का उपयोग करें:

https://github.com/github/{repository}/blob/assets/cat.png 

(उसी GitHub मदद पृष्ठ से फ़ाइल दृश्य एक शाखा पर नवीनतम संस्करण दिखाते हैं )


2
यह स्वीकृत उत्तर का एक अच्छा पूरक है। संपत्तियों को ट्रैक किया जाता है, चित्र मास्टर में नहीं हैं, कोई अव्यवस्था नहीं है। बस के बारे में सावधान रहना git reset --hard; सुनिश्चित करें कि परिवर्तन किए गए थे।
डोजुबा

अपनी मशीन पर जंगली में। आप जहां भी फ़ाइल होने के लिए (होता है यह इंगित कर सकते हैं ~/Downloads, /tmp, आदि)।
पौलमेलनिकोव

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

21

कमिट अपनी छवि ( image.png एक फ़ोल्डर (में) MyFolder ) और अपने में निम्नलिखित पंक्ति जोड़ें README.md :

![Optional Text](../master/myFolder/image.png)


17
  • चित्र जोड़ने के बारे में एक समस्या बनाएँ
  • खींचें और ड्रॉप या फ़ाइल चयनकर्ता द्वारा छवि जोड़ें
  • फिर इमेज सोर्स कॉपी करें

  • अब ![alt tag](http://url/to/img.png)अपने README.md फ़ाइल में जोड़ें

किया हुआ!

वैकल्पिक रूप से आप कुछ इमेज होस्टिंग साइट का उपयोग कर सकते हैं जैसे imgurकि यह यूआरएल है और इसे अपनी README.md फाइल में जोड़ें या आप कुछ स्टैटिक फाइल होस्टिंग का भी उपयोग कर सकते हैं।

नमूना मुद्दा


मेरी राय में उन्हें जोड़ने का यह सबसे आसान तरीका है। बस उन्हें बॉक्स में खींचें, पता कॉपी करें और नीचे दिए गए कैप्शन के साथ अपने रीडमी में पेस्ट करें। बूम, आप कर रहे हैं।
जो पहाड़ी

15

मुझे अपनी README फाइल में कुछ छवियों को शामिल करने की आवश्यकता है। मुझे नहीं पता कि ऐसा कैसे करना है।

मैंने एक छोटा सा विज़ार्ड बनाया जो आपको अपने GitHub रिपॉजिटरी के रीडमे के लिए सरल छवि दीर्घाओं को बनाने और कस्टमाइज़ करने की अनुमति देता है: ReadmeGalleryCreatorForGitHub देखें ।

विज़ार्ड इस तथ्य का फायदा उठाता है कि GitHub में img टैग्स होने देता है README.md। इसके अलावा, विज़ार्ड GitHub में छवियों को अपलोड करने के लोकप्रिय ट्रिक का उपयोग उन्हें मुद्दा क्षेत्र में ड्रैग'एनलॉगरोपिंग द्वारा करता है (जैसा कि पहले से ही इस थ्रेड में उत्तर में वर्णित है)।

यहां छवि विवरण दर्ज करें


2
इस उपकरण को प्यार करो!
दान

1
मुझे भी यह टूल बहुत पसंद है, यह Git का डिफ़ॉल्ट फीचर होना चाहिए !!
श्रीदत्त कोठारी

14

बस <img>अपने भंडार में रिश्तेदार src के साथ अपने README.md को एक टैग जोड़ें । यदि आप सापेक्ष src का उपयोग नहीं कर रहे हैं, तो सुनिश्चित करें कि सर्वर CORS का समर्थन करता है।

यह काम करता है क्योंकि GitHub इनलाइन-html का समर्थन करता है

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

यहाँ देखें


13

बेसिक सिंटेक्स

![myimage-alt-tag](url-to-image)

यहाँ:

  1. my-image-alt-tag: वह पाठ जो छवि प्रदर्शित नहीं होने पर प्रदर्शित किया जाएगा।
  2. url-to-image: आपकी छवि संसाधन जो भी हो। छवि का यू.आर.आई.

उदाहरण:

![stack Overflow](http://lmsotfy.com/so.png)

यह निम्नलिखित की तरह दिखेगा:

स्टैक ओवरफ्लो छवि alamin द्वारा


10

बाहर खड़े होने के लिए तालिकाओं का उपयोग करें, यह इसे अलग आकर्षण देगा

तालिका सिंटैक्स है:

प्रत्येक स्तंभ सेल को प्रतीक द्वारा अलग करें |

और तालिका शीर्ष लेख (पहली पंक्ति) द्वारा दूसरी पंक्ति द्वारा ---


| कर्नल 1 | कर्नल 2 |
| ------------ | ------------- |
| छवि 1 | छवि 2 |

उत्पादन

यहां छवि विवरण दर्ज करें


<img src="url/relativePath">यदि आप दो छवियों का उपयोग कर रहे हैं तो अब केवल छवि 1 और छवि 2 पर रखें


ध्यान दें: यदि कई छवियों का उपयोग करना अधिक कॉलम शामिल करता है, तो आप इसे पढ़ने योग्य बनाने के लिए चौड़ाई और ऊंचाई विशेषता का उपयोग कर सकते हैं।

उदाहरण


| कर्नल 1 | कर्नल 2 |
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

रिक्ति मायने नहीं रखती है

आउटपुट छवि

यहां छवि विवरण दर्ज करें

द्वारा मदद: adam-p


5
ओपी के प्रश्न के विषय में तालिकाओं का उपयोग अप्रासंगिक है।
mhucka

1
किसी ऐप के स्क्रीनशॉट को इस तरह से जोड़ा जा सकता है, धन्यवाद
उपराजाह

टेबल्स के बजाय सीएसएस का उपयोग करें, यह आपकी दुनिया को हिला देगा।
jeffmcneill

9

आप बस कर सकते हैं:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

तब आप इसे READMEफ़ाइल में इस तरह से संदर्भित कर सकते हैं :

![diagram](diagram.png)


1
बिल्कुल सही और कुरकुरा।
बिस्वजीत दास

1
यह काम करता है, वास्तव में, मुझे लगता है कि इस उत्तर को स्वीकार किया जाना चाहिए
लुक एरन

8

मेरे मामले में मैं imgur का उपयोग करता हूं और इस तरह से सीधा लिंक का उपयोग करता हूं ।

![img](http://i.imgur.com/yourfilename.png)

8

आप वैकल्पिक Github CDN लिंक का उपयोग करके README.md (या बाहरी) से अपनी परियोजना में छवियों को लिंक कर सकते हैं।

URL इस तरह दिखेगा:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

मेरे पास अपने प्रोजेक्ट में एक एसवीजी छवि है, और जब मैं इसे अपने पायथन प्रोजेक्ट डॉक्यूमेंटेशन में संदर्भित करता हूं, तो यह रेंडर नहीं करता है।

प्रोजेक्ट लिंक

यहाँ फ़ाइल के लिए परियोजना लिंक है (एक छवि के रूप में प्रस्तुत नहीं करता है):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

उदाहरण एम्बेडेड छवि: छवि

कच्चा लिंक

यहाँ फ़ाइल के लिए रॉ लिंक है (अभी भी एक छवि के रूप में प्रस्तुत नहीं करता है):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

उदाहरण एम्बेडेड छवि: छवि

सीडीएन लिंक

CDN लिंक का उपयोग करके, मैं फ़ाइल का उपयोग करके लिंक कर सकता हूं (एक छवि के रूप में प्रस्तुत करता है):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

उदाहरण एम्बेडेड छवि: छवि

इस तरह मैं दोनों मेरे में अपने प्रोजेक्ट से छवियों का उपयोग करने में सक्षम हूँ README.mdमेरी PyPi परियोजना reStructredText doucmentation में फ़ाइल, और ( यहाँ )


7

मैंने इस समस्या को हल कर दिया है। आपको केवल किसी और की रीडमी फ़ाइल को संदर्भित करने की आवश्यकता है।

सबसे पहले, आपको एक चित्र फ़ाइल को जीथब कोड लाइब्रेरी में अपलोड करना चाहिए! फिर छवि फ़ाइल के पते का प्रत्यक्ष संदर्भ।



यहां छवि विवरण दर्ज करें

यहां छवि विवरण दर्ज करें


6

मैं आमतौर पर साइट पर छवि होस्ट करता हूं, यह किसी भी होस्ट की गई छवि से लिंक कर सकता है। बस इसे रीडमी में टॉस करें। .rstफ़ाइलों के लिए काम करता है , निश्चित नहीं है.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

5

मेरे मामले में मैं एक प्रिंट स्क्रीन दिखाना चाहता था, Githubलेकिन इस पर भी NPM। भले ही रिश्तेदार पथ का उपयोग कर रहा था Github, लेकिन यह इसके बाहर काम नहीं कर रहा था। असल में, भले ही मैंने अपनी परियोजना को आगे बढ़ाया NPM(जो कि बस उसी का उपयोग करता है readme.md, छवि कभी नहीं दिखा रही थी।

मैंने कुछ तरीकों की कोशिश की, अंत में यही मेरे लिए काम किया:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

अब मैं अपनी छवि को सही तरीके से NPMया कहीं और देखता हूं कि मैं अपना पैकेज प्रकाशित कर सकूं।


5

यदि आपको प्रलेखन के लिए कुछ चित्र अपलोड करने की आवश्यकता होती है, तो एक अच्छा तरीका यह है कि git-lfs का उपयोग करें । मान लें कि आपने git-lfs को इन चरणों का पालन किया है:

  1. अपनी प्रत्येक छवि प्रकार के लिए git lfs का परिचय दें:

    git lfs *.png
    git lfs *.svg
    git lfs *.gif
    git lfs *.jpg
    git lfs *.jpeg
    
  2. एक फ़ोल्डर बनाएँ जिसका उपयोग छवि स्थान के रूप में किया जाएगा। doc। जीएनयू / लिनक्स और यूनिक्स आधारित प्रणालियों के माध्यम से यह किया जा सकता है:

    cd project_folder
    mkdir doc
    git add doc
    
  3. किसी भी इमेज को डॉक फोल्डर में कॉपी पेस्ट करें। बाद में उन्हें git addकमांड के माध्यम से जोड़ें ।

  4. प्रतिबद्ध और धक्का।

  5. चित्र निम्न url में सार्वजनिक रूप से उपलब्ध हैं:

    https://media.githubusercontent.com/media/ ^ github_username ^ / ^ रेपो ^ / ^ ब्रांच ^ / ^ इमेज_लोकेशन इन द रेपो ^

जहाँ: * ^github_username^github में उपयोगकर्ता नाम है (आप इसे प्रोफाइल पेज में पा सकते हैं) * ^repo_name^रिपॉजिटरी नाम है * ^branch^रिपॉजिटरी ब्रांच है जहाँ इमेज अपलोड की गई है *^image_location in the repo^ वह फ़ोल्डर जिसमें छवि संग्रहीत है सहित स्थान है।

इसके अलावा आप छवि को पहले अपलोड कर सकते हैं फिर अपने प्रोजेक्ट्स के github पेज में स्थान पर जाएँ और तब तक नेविगेट करें जब तक आपको छवि नहीं मिल जाती है तब downloadबटन दबाएं और फिर ब्राउज़र के एड्रेस बार से यूआरएल को कॉपी-पेस्ट करें।

संदर्भ के रूप में मेरी परियोजना से इसे देखें ।

फिर आप ऊपर उल्लिखित मार्कडाउन सिंटैक्स का उपयोग करके उन्हें शामिल करने के लिए url का उपयोग कर सकते हैं:

![some alternate text that describes the image](^github generated url from git lfs^)

उदाहरण: मान लें कि हम इस फ़ोटो का उपयोग करते हैं तो आप मार्कडाउन सिंटैक्स का उपयोग कर सकते हैं:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

5

बस इस काम करता है !!

टैग में अपने फ़ाइल नाम अपरकेस के बारे में ध्यान रखें और PNG फ़ाइल इनरोट डालें, और किसी भी फ़ाइल नाम के बिना लिंक करें:

![Screenshot](screenshot.png)

5

मैं पहले से ही स्वीकार किए गए उत्तर में एक उदाहरण या विस्तार कर रहा हूं।

एक बार जब आप छवि को अपने गीथूब रेपो पर डालते हैं।

फिर:

  • अपने ब्राउज़र पर संबंधित Github रेपो खोलें।
  • लक्ष्य छवि फ़ाइल पर नेविगेट करें फिर बस छवि को एक नए टैब में खोलें। एक नए टैब में छवि को खोलना
  • यूआरएल कॉपी करें ब्राउज़र टैब से url कॉपी करें
  • और अंत में url को निम्न पैटर्न में डालें ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

मेरे मामले पर यह है

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

कहाँ पे

  • shadmazumder क्या मेरे username
  • Xcode है projectname
  • master है branch
  • InOnePicture.pngहै image, मेरे मामले InOnePicture.pngमें रूट डायरेक्टरी में है।

1
यह एकमात्र ऐसा है, जिसने मेरे लिए निर्दोष रूप से काम किया। रास्तों के बारे में कोई भ्रम नहीं है, चाहे "मास्टर" एक निर्देशिका या एक शाखा को संदर्भित करता है, जहां रूट शुरू होता है, आदि। केवल कैविएट फ़ायरफ़ॉक्स (72) है जो आपको अलग टैब में छवि खोलने की अनुमति नहीं देता है, इसलिए यह केवल क्रोम के लिए है I सोच।
थॉमस ब्राउन

5

ऐसा करने के लिए 2 सरल तरीके हैं,

1) का उपयोग करें HTML img टैग,

2)! [] (वह पथ जहाँ आपकी छवि सहेजी गई है / image-name.png)

पथ जब आप उस छवि को खोलते हैं तो आप ब्राउज़र से URL से कॉपी कर सकते हैं। रिक्ति होने की समस्या हो सकती है, इसलिए सुनिश्चित करें कि कोई भी स्थान b / w पथ के दो शब्द या छवि के नाम में जोड़ें-% 20। जैसे ब्राउज़र करते हैं।

वे दोनों काम करेंगे, यदि आप अधिक समझना चाहते हैं तो आप मेरे जीथूब की जांच कर सकते हैं -> https://github.com/adityarawat29


इसने मेरे लिए काम किया है। README.md के तहत एक फ़ोल्डर "ऐप्स" में एक छवि होने से मैंने उपयोग किया है:![](images/ss_apps.png)
cdsaenz

1
मुझे आश्चर्य है कि केवल आदित्य ने उल्लेख किया है कि रिक्त स्थान एक समस्या है, और एक बेवकूफ तरीके से भी - कोई त्रुटि नहीं है, लेकिन आपका सिंटैक्स बस प्रदर्शित होता है जैसे कि कोई ऐसी सुविधा भी मौजूद नहीं होगी। इस बात का उल्लेख करने के लिए मेरी ओर से उकसाओ।
तम्मि

5

यह उत्तर यहां भी मिल सकता है: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

रेपो का उपयोग करके चित्र प्रदर्शित करें:

प्रीपेंड डोमेन: https://raw.githubusercontent.com/

झंडा जोड़ें: ?sanitize=true&raw=true

<img />टैग का उपयोग करें

Eample url svg, png और jpg के लिए काम करता है:
  • डोमेन :raw.githubusercontent.com/
  • उपयोगकर्ता नाम :YourUserAccount/
  • रेपो :YourProject/
  • शाखा :YourBranch/
  • पथ :DirectoryPath/
  • फ़ाइल नाम :example.png

एसवीजी, पीएनजी और जेपीईजी के लिए काम करता है

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

उपयोग किए जाने के बाद नीचे प्रदर्शित उदाहरण कोड काम कर रहा है:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com :

साभार: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -इन-markdown / readme.md


यह मेरे लिए तब तक काम नहीं आया जब तक मैंने क्वेरी स्ट्रिंग नहीं हटा दी।
mhenry1384

1
कम से कम .png और raw.githubusercontent.com के लिए sanitize = true काम नहीं करता है और इसे हटा दिया जाना चाहिए। कच्चा = सही काम करता है। github.com/sphinxy/AppDynamics.Playground/blob/master/README.md
Danila Polevshikov

1
rawgit.com 2018 में बंद हो गया है और इसे किसी भी अधिक उपयोग नहीं किया जाना चाहिए; आपको इसे इस उत्तर से हटा देना चाहिए। raw.githubusercontent.com , जिसका आप भी उल्लेख करते हैं, निकटतम विकल्प है।
रोरी ओ'केन

4

मुझे एक और समाधान मिल गया है लेकिन काफी अलग है और मैं इसे समझाऊंगा

मूल रूप से, मैंने छवि दिखाने के लिए टैग का उपयोग किया था, लेकिन मैं दूसरे पृष्ठ पर जाना चाहता था जब छवि पर क्लिक किया गया था और यहां बताया गया है कि मैंने इसे कैसे दिखाया।

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

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


2

नवीनतम

विकी पीएनजी, जेपीईजी, या जीआईएफ चित्र प्रदर्शित कर सकते हैं

अब आप उपयोग कर सकते हैं:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-या-

इन कदमों का अनुसरण करें:

  1. GitHub पर, रिपॉजिटरी के मुख्य पृष्ठ पर जाएँ।

  2. अपने रिपॉजिटरी नाम के तहत, विकी पर क्लिक करें।

  3. विकी साइडबार का उपयोग करके, उस पृष्ठ पर नेविगेट करें जिसे आप बदलना चाहते हैं और फिर संपादित करें पर क्लिक करें।

  4. विकी टूलबार पर, छवि पर क्लिक करें ।

  5. "इंसर्ट इमेज" डायलॉग बॉक्स में, इमेज यूआरएल और ऑल्ट टेक्स्ट (जो सर्च इंजन और स्क्रीन रीडर द्वारा उपयोग किया जाता है) टाइप करें।
  6. ओके पर क्लिक करें।

डॉक्स को देखें ।


2

tableयदि एक से अधिक स्क्रीनशॉट जोड़ने का उपयोग करने पर विचार करें और बेहतर एक्सेसिबिलिटी के लिए सारणीबद्ध डेटा का उपयोग करके उन्हें संरेखित करना चाहते हैं जैसा कि यहां दिखाया गया है:

चाय के साथ पेट भर नाश्ता

यदि आपका मार्कडाउन पार्सर इसका समर्थन करता है तो आप role="presentation"TIA तत्व में WIA-ARIA विशेषता भी जोड़ सकते हैं और thटैग को छोड़ सकते हैं।


2

स्टेप बाय स्टेप प्रोसेस, सबसे पहले एक फोल्डर बनाएं (अपने फोल्डर को नाम दें) और उस इमेज / इमेजेस को ऐड करें जिसे आप रीडमेमड फाइल में अपलोड करना चाहते हैं। (आप अपने प्रोजेक्ट के किसी भी मौजूदा फ़ोल्डर में छवि / चित्र भी जोड़ सकते हैं।) अब, Readme.md फ़ाइल के संपादन आइकन पर क्लिक करें, फिर

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

छवि जोड़ने के बाद, आप परिवर्तनों का पूर्वावलोकन देख सकते हैं, "पूर्वावलोकन बदलें" टैब। आपको अपनी छवि यहां मिलेगी। इस तरह के उदाहरण के लिए, मेरे मामले में,

![](app/src/main/res/drawable/refrence_image.png)

ऐप फोल्डर -> src फोल्डर -> मेन फोल्डर -> रिस फोल्डर -> ड्रॉएबल फोल्डर -> और अंदर की ओर ड्रा करने योग्य फोल्डर refrence_image.png फाइल स्थित है। कई छवियों को जोड़ने के लिए, आप इसे इस तरह से कर सकते हैं,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

नोट 1 - सुनिश्चित करें कि आपकी छवि फ़ाइल नाम में कोई स्थान नहीं है। यदि इसमें स्थान हैं तो आपको फ़ाइल नाम के बीच प्रत्येक स्थान के लिए% 20 जोड़ने की आवश्यकता है। रिक्त स्थान को निकालना बेहतर है।

नोट 2 - आप HTML टैग का उपयोग करके भी छवि का आकार बदल सकते हैं, या अन्य तरीके भी हैं। आप इसे और अधिक के लिए गूगल कर सकते हैं। यदि तुम्हें इसकी आवश्यकता है।

इसके बाद, अपना प्रतिबद्ध परिवर्तन संदेश लिखें, और फिर अपना परिवर्तन करें।

इसे करने के कई अन्य हैक हैं जैसे, एक मुद्दा बनाना और आदि और आदि। अब तक यह सबसे अच्छी विधि है जो मैं भर में आया हूं।


1

हम बस यह कर सकते हैं,

  • GitHub पर एक नया अंक बनाएँ
  • divमुद्दे के शरीर पर चित्र खींचें और छोड़ें

कुछ सेकंड के बाद, एक लिंक उत्पन्न हो जाएगा। अब, लिंक या छवि URL की प्रतिलिपि बनाएँ और इसे किसी भी समर्थित प्लेटफ़ॉर्म का उपयोग करें।


आपका समाधान काम करता है! यह आसान है। धन्यवाद
जैन Vie

1

अपलोड फ़ाइल विकल्प से फिर README फ़ाइल में अपनी रिपॉजिटरी में छवि जोड़ें

![Alt text]("enter repository image URL here") 

1

एक और विकल्प है जिसका मैंने उल्लेख नहीं किया है। आप बस अपने उपयोगकर्ता या संगठन के तहत "संपत्ति" नामक एक और रिपॉजिटरी बना सकते हैं। इस रेपो में अपनी छवियों को पुश करें और उन्हें अपने अन्य रेपो से संदर्भित करें:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

मैंने अपने रेपो में यह किया है और यह मुझे ठीक लगता है। मैं अपनी सभी परियोजनाओं के लिए अपनी README छवियों को अपने कोड से स्वतंत्र रूप से संस्करणित कर सकता हूं, लेकिन फिर भी उन सभी को एक स्थान पर रख सकता हूं । कोई समस्या या शाखा या अन्य आसानी से गलत कलाकृतियों की आवश्यकता नहीं है।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.