เป็นไปได้หรือไม่ที่จะวางภาพหน้าจอในไฟล์ README ในที่เก็บ GitHub? ไวยากรณ์คืออะไร

หากคุณใช้ Markdown (README.md):

หากคุณมีภาพใน repo ของคุณคุณสามารถใช้ URL ที่เกี่ยวข้อง:

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

หากคุณต้องการฝังภาพที่โฮสต์ไว้ที่อื่นคุณสามารถใช้ URL แบบเต็มได้

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

GitHub แนะนำให้คุณใช้ลิงก์ที่สัมพันธ์กับ?raw=trueพารามิเตอร์เพื่อให้มั่นใจว่าจุด repos แยกได้อย่างถูกต้อง

raw=trueพารามิเตอร์ที่มีในการสั่งซื้อเพื่อให้แน่ใจว่าภาพที่คุณเชื่อมโยงไปยังจะมีการแสดงผลเป็น ซึ่งหมายความว่าเฉพาะภาพที่จะเชื่อมโยงไปถึงไม่ใช่อินเตอร์เฟส GitHub ทั้งหมดสำหรับไฟล์นั้น ๆ ดูความคิดเห็นนี้สำหรับรายละเอียดเพิ่มเติม

ลองดูตัวอย่าง: https://raw.github.com/altercation/solarized/master/README.md

ถ้าคุณใช้ SVGs แล้วคุณจะต้องตั้งแอตทริบิวต์ sanitize ไปเช่นกัน:true ?raw=true&sanitize=true(ขอบคุณ @EliSherer)

นอกจากนี้ยังมีเอกสารเกี่ยวกับลิงก์ที่เกี่ยวข้องในไฟล์ README: https://help.github.com/articles/relative-links-in-readmes

และแน่นอนเอกสาร markdown: http://daringfireball.net/projects/markdown/syntax

นอกจากนี้หากคุณสร้างสาขาใหม่screenshotsเพื่อจัดเก็บภาพคุณสามารถหลีกเลี่ยงพวกเขาอยู่ในmasterต้นไม้ทำงาน

จากนั้นคุณสามารถฝังโดยใช้:

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

แม้ว่าจะมีคำตอบที่ยอมรับแล้ว แต่ฉันต้องการเพิ่มอีกวิธีหนึ่งในการอัปโหลดภาพไปยัง readme บน GitHub

• คุณต้องสร้างปัญหาใน repo ของคุณ
• ลากและวางในพื้นที่แสดงความคิดเห็นภาพของคุณ
• หลังจากสร้างลิงค์สำหรับรูปภาพแล้วให้แทรกไว้ที่ readme ของคุณ

รายละเอียดเพิ่มเติมคุณสามารถค้นหาได้ที่นี่

ฉันพบว่าเส้นทางไปยังรูปภาพใน repo ของฉันไม่เพียงพอฉันต้องเชื่อมโยงไปยังรูปภาพบนraw.github.comโดเมนย่อย

รูปแบบ URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

ตัวอย่าง Markdown ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

1. อัปโหลดภาพของคุณไปที่ postimage.org
2. รับ github Markdown url
3. แทรกใน ReadMe ของคุณ

หนึ่งบรรทัดด้านล่างควรเป็นสิ่งที่คุณมองหา

ถ้าไฟล์ของคุณอยู่ในพื้นที่เก็บข้อมูล

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

หากไฟล์ของคุณอยู่ใน URL ภายนอกอื่น ๆ

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

ไวยากรณ์ markdown สำหรับการแสดงภาพแน่นอน:

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

แต่:วิธีการให้urlหรือไม่

• คุณอาจไม่ต้องการให้ repo ของคุณเต็มไปด้วยภาพหน้าจอพวกเขาไม่มีส่วนเกี่ยวข้องกับรหัส
• คุณอาจไม่ต้องการจัดการกับความยุ่งยากในการทำให้ภาพของคุณพร้อมใช้งานบนเว็บ ... (อัปโหลดไปยังเซิร์ฟเวอร์ ... )

ดังนั้น ... คุณสามารถใช้เคล็ดลับที่ยอดเยี่ยมนี้เพื่อทำให้ github โฮสต์ไฟล์รูปภาพของคุณ TDLR:

1. สร้างปัญหาในรายการปัญหาของ repo ของคุณ
2. ลากและวางภาพหน้าจอของคุณในปัญหานี้
3. คัดลอกรหัส markdown ที่ github เพิ่งสร้างเพื่อให้คุณแสดงภาพของคุณ
4. วางลงใน readme ของคุณ (หรือทุกที่ที่คุณต้องการ)

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

ง่ายกว่าการเพิ่ม URL เพียงอัปโหลดภาพไปยังที่เก็บเดียวกันเช่น:

![Screenshot](screenshot.png)

เพิ่มลงใน README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>

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

• สร้างปัญหาเกี่ยวกับการเพิ่มภาพ
• เพิ่มภาพโดยการลากและวางหรือเลือกไฟล์

• จากนั้นคัดลอกแหล่งที่มาของภาพ

• ตอนนี้เพิ่ม![Screenshot](http://url/to/img.png)ไฟล์ README.md ของคุณ

ทำ!

หรือคุณสามารถใช้ไซต์โฮสต์รูปภาพบางรูปเช่นimgurรับ URL และเพิ่มไว้ในไฟล์ README.md ของคุณหรือคุณสามารถใช้โฮสต์ไฟล์แบบคงที่ได้เช่นกัน

ตัวอย่างปัญหา

วิธีที่ 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 " />

หมายเหตุ -> หากคุณไม่ต้องการจัดสไตล์ภาพของคุณเช่นปรับขนาดลบส่วนสไตล์

ขั้นแรกให้สร้างไดเรกทอรี (โฟลเดอร์) ในรูทของ repo ในพื้นที่ของคุณซึ่งจะมีสิ่งที่screenshotsคุณต้องการเพิ่ม ลองเรียกชื่อไดเรกทอรีนี้screenshotsกัน วางภาพ (JPEG, PNG, GIF, ฯลฯ ) ที่คุณต้องการเพิ่มลงในไดเรกทอรีนี้

ภาพหน้าจอของ Android Studio Workspace

ประการที่สองคุณต้องเพิ่มลิงค์ไปยังภาพแต่ละภาพใน 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 จะจัดเรียงให้คุณโดยอัตโนมัติ

สุดท้ายทำการเปลี่ยนแปลงและผลักดันมัน!

ฉัน googled คำถามที่คล้ายกันสองสามข้อและไม่เห็นคำตอบใด ๆ กับปัญหาของฉันและวิธีแก้ปัญหาที่ง่าย

Google Cloud Storage - แนวทางที่แตกต่างกันเล็กน้อยสำหรับรูปภาพใน README

ไปที่นี่: เช่นเดียวกับ OP ฉันต้องการรูปภาพใน Github README ของฉันและรู้ไวยากรณ์ของ Markdown สำหรับการทำเช่นนั้นพิมพ์ใน:

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

คุณต้องดำเนินการทดแทนตามจริงด้านบนให้เสร็จสิ้น (เช่น MY_IMAGE = image.jpg) เพื่อให้สิ่งนี้ใช้งานได้

แต่เดี๋ยวก่อน ... ล้มเหลว - ไม่มีภาพถ่ายที่แสดงจริง! และลิงค์ก็เป็นไปตามที่กำหนดโดย Google Storage!

Github camo- รูปภาพที่ไม่ระบุตัวตน

Github โฮสต์ภาพของคุณโดยไม่ระบุชื่อใช่! อย่างไรก็ตามสิ่งนี้นำเสนอปัญหาสำหรับสินทรัพย์ที่เก็บข้อมูลของ Google คุณต้องได้รับ URL ที่สร้างขึ้นจาก Google Cloud Console ของคุณ

ฉันแน่ใจว่ามีวิธีที่ราบรื่นขึ้นเพียงไปที่จุดปลายทาง URL ที่คุณกำหนดและคัดลอก URL แบบยาว รายละเอียด:

คำแนะนำ

1. เยี่ยมชมคอนโซลการจัดเก็บของคุณ: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? project = $ {MY_PROJECT}
2. คลิกที่ภาพที่คุณต้องการแสดงใน Github (จะปรากฏขึ้นที่หน้า "รายละเอียดวัตถุ")
3. คัดลอกพาสต้า URL นั้น (อันที่เริ่มต้นด้วยhttpsไม่ใช่gs) ลงในแท็บ / หน้าต่างเบราว์เซอร์ใหม่
4. คัดลอกพาสต้า URL ที่สร้างขึ้นใหม่ซึ่งควรยาวกว่าจากแท็บเบราว์เซอร์ / หน้าต่างใหม่ของคุณไปยังไฟล์ Github README ของคุณ

หวังว่านี่จะช่วยเร่งความเร็วและชี้แจงปัญหานี้ให้คนอื่น ๆ

สำหรับฉันวิธีที่ดีที่สุดคือ -

1. สร้างปัญหาใหม่ด้วยที่เก็บบน github แล้วอัปโหลดไฟล์ในรูปแบบ gif หากต้องการแปลงไฟล์วิดีโอเป็นรูปแบบ gif คุณสามารถใช้เว็บไซต์นี้ได้ที่http://www.online-convert.com/
2. ส่งปัญหาที่สร้างขึ้นใหม่
3. คัดลอกที่อยู่ของไฟล์ที่อัพโหลด
4. ในที่สุดใส่ไฟล์ README ของคุณ! [สาธิต] (ที่อยู่ COPIED)

หวังว่าจะช่วยได้

เพิ่มภาพในพื้นที่เก็บข้อมูลจากตัวเลือกอัปโหลดไฟล์จากนั้นในไฟล์ README

![Alt text]("enter image url of repositoryhere") 

ด้วยภาพที่อยู่ใน/screen-shotsไดเรกทอรี ด้านนอก<div>ช่วยให้สามารถจัดตำแหน่งภาพได้ padding <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>