Github रिपॉजिटरी में README के ​​स्क्रीनशॉट कैसे जोड़ें?


593

क्या GitHub रिपॉजिटरी में README फाइल में स्क्रीनशॉट डालना संभव है? वाक्यविन्यास क्या है?


1
इसका सही समाधान रिश्तेदार संदर्भों का उपयोग करना है, इस उत्तर के अनुसार stackoverflow.com/a/11916467/1633251 (यह करने के लिए कैसे करें पर एक नए github डॉक्टर के लिंक के साथ टिप्पणी देखें)। संक्षिप्त उत्तर का उपयोग करना है[Read more words!](docs/more_words.md)
डेविड एच

2
अधिकांश समाधान रेपो को इंगित करने का प्रस्ताव देते हैं। क्या होगा यदि आप रेपो (प्रस्तावित शाखा के रूप में एक अलग शाखा में भी) से बचना चाहते हैं, और आप इसे बाहरी स्थान पर संग्रहीत करना चाहते हैं? कोई अच्छी प्रैक्टिस? एक जिस्ट शायद (आईडीके अगर जिस्ट बाइनरी या सिर्फ टेक्स्ट हो सकता है)? प्रोजेक्ट "मायप्रोजेक्ट" के लिए एक और रेपो "मायप्रोजेक्ट-एसेट्स" बनाना? वीडियो अपलोड करने के लिए youtube के डे-फैक्टो मानक के समान कोई बाहरी लोकप्रिय छवि-स्थान?
ज़ावी मोंटेरो


जवाबों:


849

यदि आप मार्कडाउन (README.md) का उपयोग करते हैं:

बशर्ते कि आपके रेपो में आपकी छवि हो, आप एक सापेक्ष URL का उपयोग कर सकते हैं:

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

यदि आपको किसी ऐसी छवि को एम्बेड करने की आवश्यकता है जो कहीं और होस्ट की गई है, तो आप एक पूर्ण URL का उपयोग कर सकते हैं

![Alt text](http://full/path/to/img.jpg "Optional title")

गिटहब अनुशंसा करता है कि आप पैरामीटर के साथ रिश्तेदार लिंक का उपयोग ?raw=trueकरें ताकि रीकोस पॉइंट को सही ढंग से सुनिश्चित किया जा सके।

raw=trueपैरामीटर जो चित्र से लिंक सुनिश्चित करने के लिए नहीं है, है के रूप में प्रदान की जाएगी। इसका मतलब है कि केवल उस छवि से जुड़ा होगा, न कि उस संबंधित फ़ाइल के लिए पूरा GitHub इंटरफ़ेस। देखें इस टिप्पणी अधिक जानकारी के लिए।

एक उदाहरण देखें: https://raw.github.com/altercation/solarized/master/README.md

आप SVGs का उपयोग करते हैं तो आप के लिए स्वच्छ विशेषता सेट करना होगा trueऔर साथ ही: ?raw=true&sanitize=true। (साभार @EliSherer)

इसके अलावा, README फाइलों में रिश्तेदार लिंक पर प्रलेखन: https://help.github.com/articles/relative-links-n-readmes

और निश्चित रूप से मार्कडाउन डॉक्स: http://daringfireball.net/projects/markdown/syntax

इसके अतिरिक्त, यदि आप screenshotsछवियों को संग्रहीत करने के लिए एक नई शाखा बनाते हैं, तो आप उन्हें masterकाम के पेड़ में होने से बचा सकते हैं

तब आप उनका उपयोग करके एम्बेड कर सकते हैं:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

1
ठीक है, मैंने रिश्तेदार लिंक पर आधिकारिक डॉक्स को जोड़ा, लेकिन मैं कुछ रेपो को खोजने में असमर्थ हूं जो उनका उपयोग करता है, अगर आपके पास सुझाव हैं, तो मुझे खुशी होगी क्योंकि पूरे बिंदु अधिक लोगों की मदद कर रहा है, गुंजाइश में नहीं रहना (यहाँ मेरी गलती है)।
पॉल

2
@Paul, यहाँ एक उदाहरण रिपॉजिटरी कर रहा है! github.com/Tarrasch/zsh-bd
Tarrasch

4
github.com/altercation/solarized उपरोक्त उदाहरण का प्रदान किया गया संस्करण है, किसी को भी मदद करने के लिए।
बैरीकेटर

3
जब आप कहते हैं /relative/path/to/img.jpg, कि प्रमुख स्लैश के कारण एक निरपेक्ष मार्ग नहीं है?
jww

1
@kelvin, raw=trueछवि को GitHub पथ बिंदुओं को रेंडर करने के लिए पैरामीटर है, GitHub इंटरफ़ेस नहीं। कोशिश करें और अंतर देखें: github.com/altercation/solarized/blob/master/img/… बनाम github.com/altercation/solarized/blob/master/img/… । पहला URL आपको GitHub इंटरफ़ेस और छवि दिखाएगा, जबकि दूसरा केवल आपको छवि दिखाएगा। क्लोनिंग / फोर्किंग रिपॉजिट के समय रिश्तेदार लिंक अभी भी उपयोगी हैं, इसलिए हां आपको उस पैरामीटर के साथ रिश्तेदार पथ का उपयोग करना चाहिए, लेकिन वे विभिन्न अवधारणाएं हैं।
पॉल

70

हालांकि पहले से ही एक स्वीकृत उत्तर है, मैं गीथहब पर रीडमी को चित्र अपलोड करने का एक और तरीका जोड़ना चाहूंगा।

  • आपको अपने रेपो में मुद्दा बनाने की जरूरत है
  • अपनी छवि को टिप्पणी क्षेत्र में खींचें और छोड़ें
  • छवि के लिए लिंक उत्पन्न होने के बाद इसे अपने रीडमी में डालें

अधिक विवरण आप यहां पा सकते हैं


6
मुझे दिलचस्पी है कि इस तरह से लोड की गई छवियां कब तक रहेंगी। क्या गितुब कुछ छवियों की सफाई करता है? जैसे, "अगर यह चित्र किसी भी गितुब मुद्दे से संदर्भित नहीं है, तो मैं इसे सुरक्षित रूप से हटा सकता हूं" ...
आर्टिन

1
@Artin शायद केवल जब समस्या पूरी तरह से हटा दी जाती है। बंद मुद्दे हमेशा के लिए चिपक जाते हैं क्योंकि वे प्रलेखन और डीबगिंग में बहुत महत्वपूर्ण भूमिका निभाते हैं
andrhamm

55

मैंने पाया कि मेरे रेपो में छवि का मार्ग पर्याप्त नहीं था, मुझे छवि को raw.github.comउपडोमेन से जोड़ना था ।

URL प्रारूप https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

मार्कडाउन उदाहरण ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)


4
यह स्वीकार किए जाते हैं @sorens की वजह से स्वीकार किए जाते हैं उत्तर पर टिप्पणी। यह पूर्ण स्नान निर्दिष्ट करने के लिए बुरा है क्योंकि यह कांटे वाली रिपोजिटरी पर अच्छी तरह से काम नहीं करेगा। (या यदि आप अपने रेपो का नाम बदलते हैं, या यदि
गीथूब ने

7
@ LinusUnnebäck: निरपेक्ष पथ imho का उपयोग करने का एक अच्छा कारण है: यदि readme.md को अन्य स्थानों पर भी उपयोग किया जाता है, उदाहरण के लिए, एक Doxygen मुख्य-पृष्ठ के रूप में। सापेक्ष लिंक तब काम नहीं करेंगे।
इला 782

1
@ Ela782, हालांकि, एक और नोट पर, कि सॉफ्टवेयर के लिए एक मुद्दा नहीं होना चाहिए जो विशेष रूप से GitHub से README फ़ाइलों को तेज कर रहा है ; इस तरह के सॉफ़्टवेयर को सापेक्ष URL को ठीक से हल करने के लिए पता होना चाहिए। उदाहरण के लिए npm करता है
मार्क अमेरी

raw.github.comउपडोमेन पर छवि से कैसे लिंक करें ? छवि फ़ाइल कहां अपलोड करें?
सैफ

@Saif raw.github.com आपके गीथूब भंडार के लिए प्रतिबद्ध है। बस अपनी रिपॉजिटरी में इमेज को कमिट करें और निर्दिष्ट URL फॉर्मेट को फॉलो करें।

24
  1. अपनी छवि को postimage.org पर अपलोड करें
  2. जीथब मार्कडाउन यूआरएल प्राप्त करें
  3. अपने ReadMe में डालें

2
इस यूआरएल के रूप में परिवर्तन होना चाहिए postimages.org
इन्द्रजित Ekanayake

आप केवल वही हैं जिसका उत्तर मेरे लिए उपयोगी था
साइफ्रे

21

नीचे एक पंक्ति वह होनी चाहिए जो आप खोज रहे हैं

यदि आपकी फ़ाइल रिपॉजिटरी में है

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

यदि आपकी फ़ाइल अन्य बाहरी यूआरएल में है

![ScreenShot](https://{url})

2
छवि फ़ाइल के सापेक्ष लिंक का उपयोग करने का सुझाव दें, README में संबंधित लिंक
जीथब

2
-1 के लिए @ shaobin0604 द्वारा दिया गया कारण; आधिकारिक डॉक्स अपने स्वयं के रेपो में एक फ़ाइल से लिंक करते समय रिश्तेदार लिंक का उपयोग करने की सलाह देते हैं, ताकि लिंक को सही जगह पर दबाए जाने पर इंगित हो।
मार्क अमेरी

17

छवियों को प्रदर्शित करने के लिए मार्कडाउन सिंटैक्स वास्तव में है:

![image](https://{url})

लेकिन: कैसे प्रदान करने के लिए url?

  • आप शायद स्क्रीनशॉट के साथ अपने रेपो को अव्यवस्थित नहीं करना चाहते हैं, कोड के साथ उनका कोई लेना-देना नहीं है
  • आप अपनी छवि को वेब पर उपलब्ध कराने की परेशानी से निपटने के लिए या तो नहीं चाहते हैं ... (इसे सर्वर पर अपलोड करें ...)।

तो ... आप इसका उपयोग कर सकते हैं अपनी छवि फ़ाइल को होस्ट करने के लिए भयानक चाल का । TDLR:

  1. अपने रेपो की समस्या सूची पर एक मुद्दा बनाएं
  2. इस मुद्दे पर अपने स्क्रीनशॉट को खींचें और छोड़ें
  3. मार्कडाउन कोड को कॉपी करें जिसे जीथब ने आपके लिए बनाया है आपकी छवि को प्रदर्शित करने
  4. इसे अपने रीडमी पर पेस्ट करें (या आप जहां चाहें)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/


7

URL जोड़ने की तुलना में बहुत आसान है बस एक छवि को उसी रिपॉजिटरी में अपलोड करें, जैसे:

![Screenshot](screenshot.png)



4

Markdown: ![Screenshot](http://url/to/img.png)

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

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

किया हुआ!

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

नमूना मुद्दा


मैंने यह बहुत पहले किया था, अब छवियां अनुपलब्ध हैं। इसलिए मैं इसकी अनुशंसा नहीं करता।
नामांक

आप हमेशा उस मामले में imgur या कुछ कस्टम इमेज cdn का उपयोग कर सकते हैं :)
abe312

4

विधि 1-> मार्कडाउन तरीका

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

विधि 2-> HTML तरीका

<img src="https://link(format same as above)" width="100" height="100"/>

या

<img src="https://link" style=" width:100px ; height:100px " />

नोट -> यदि आप अपनी छवि को स्टाइल नहीं करना चाहते हैं अर्थात आकार भाग को हटा दें


1

सबसे पहले, अपने स्थानीय रेपो की जड़ में एक निर्देशिका (फ़ोल्डर) बनाएं जिसमें screenshotsआप जोड़ा जाना चाहते हैं। चलो इस निर्देशिका का नाम कहते हैं screenshots। छवियों (JPEG, PNG, GIF, `आदि) को आप इस निर्देशिका में जोड़ना चाहते हैं।

एंड्रॉइड स्टूडियो कार्यक्षेत्र स्क्रीनशॉट

दूसरे, आपको अपने README में प्रत्येक छवि के लिए एक लिंक जोड़ने की आवश्यकता है। इसलिए, यदि मेरे नाम 1_ArtistsActivity.pngऔर 2_AlbumsActivity.pngमेरे स्क्रीनशॉट डायरेक्टरी में चित्र हैं, तो मैं उनके लिंक इस तरह जोड़ूंगा:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

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

अंत में, अपने बदलाव करें और इसे आगे बढ़ाएं!


1

मैंने कुछ इसी तरह के सवालों का जवाब दिया और अपनी समस्या और इसके सरल / आसान समाधान के साथ कोई जवाब नहीं देखा।

Google क्लाउड स्टोरेज - README में छवियों के लिए थोड़ा अलग दृष्टिकोण

यहाँ इस प्रकार है: ओपी की तरह, मैं अपने गितुब README में एक छवि चाहता था, और, ऐसा करने के लिए मार्कडाउन सिंटैक्स को जानते हुए, इसे टाइप किया:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

काम करने के लिए आपको ऊपर दिए गए वास्तविक विकल्प (जैसे MY_IMAGE = image.jpg) को पूरा करना होगा।

लेकिन, प्रतीक्षा करें ... विफलता - कोई वास्तविक प्रदान की गई तस्वीर नहीं है! और लिंक बिलकुल वैसा ही है जैसा Google Storage द्वारा दिया गया है!

असफल गितुब छवि अपलोड का स्क्रीनशॉट

जीथब camo- बेनामी छवियां

Github आपकी छवियों को गुमनाम रूप से होस्ट करता है , याय! हालाँकि, यह Google संग्रहण परिसंपत्तियों के लिए एक मुद्दा प्रस्तुत करता है। आपको अपने Google क्लाउड कंसोल से उत्पन्न url प्राप्त करना होगा।

मुझे यकीन है कि एक शानदार तरीका है, हालांकि, बस अपने दिए गए URL समापन बिंदु पर जाएं और लंबे URL की प्रतिलिपि बनाएँ। विवरण:

अनुदेश

  1. अपने संग्रहण कंसोल पर जाएं : https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}; प्रोजेक्ट = $ {MY_PROJECT}
  2. उस चित्र पर क्लिक करें जिसे आप गितुब में प्रदर्शित करना चाहते हैं (यह "ऑब्जेक्ट विवरण" पृष्ठ को लाता है)
  3. पास्ता कि यूआरएल (एक के साथ शुरू httpsनहीं की प्रतिलिपि बनाएँgs ) को एक नए ब्राउज़र टैब / विंडो में
  4. पास्ता को नए जनरेट किए गए URL को कॉपी करें - यह अब और होना चाहिए - आपके नए ब्राउज़र टैब / विंडो से आपके Github README फ़ाइल में

उम्मीद है कि यह किसी और के लिए इस मुद्दे को गति देने और स्पष्ट करने में मदद करता है।


FYI करें - ऐसा लगता है कि Google या Github की चीजों में कुछ बदल रहा है। मैं इस विधि के माध्यम से विफल होने में README की कुछ छवियां ले चुका हूं, और कुछ 28 मार्च, 2020 दोपहर तक काम कर रहे हैं। यहां YMMV!
जेसन आर स्टीवंस सीएफए

0

मेरे लिए सबसे अच्छा तरीका है -

  1. जीथब पर उस रिपॉजिटरी के साथ एक नया मुद्दा बनाएं और फिर फाइल को जिफ फॉर्मेट में अपलोड करें। वीडियो फाइल को जिफ फॉर्मेट में कन्वर्ट करें। आप इस वेबसाइट का उपयोग कर सकते हैं http://www.online-convert.com/
  2. नए बनाए गए मुद्दे को सबमिट करें।
  3. अपलोड की गई फ़ाइल के पते की प्रतिलिपि बनाएँ
  4. अंत में आपकी README फाइल डाल दी! [डेमो] (कॉपी की गई ADDRESS)

आशा है कि यह मदद करेगा।


यह stackoverflow.com/a/32252663/1570104 से कैसे भिन्न है ?
edelans


-5

/screen-shotsनिर्देशिका में स्थित छवियों के साथ । बाहरी <div>छवियों को तैनात करने की अनुमति देता है। पैडिंग का उपयोग करके प्राप्त किया जाता है <img width="desired-padding" height="0">

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>

1
मेरे जीवन के लिए मैं README में एक छवि को केंद्रित करने का पता नहीं लगा सका - जिसमें आपका उत्तर है, इसलिए धन्यवाद!
कोडी रीचर्ट

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