เพิ่มภาพไปที่ README.md บน GitHub


1841

เมื่อเร็ว ๆ นี้ผมได้เข้าร่วมGitHub ฉันโฮสต์บางโครงการที่นั่น

ฉันต้องรวมภาพบางส่วนไว้ในไฟล์ README ของฉัน ฉันไม่รู้จะทำยังไง

ฉันค้นหาเกี่ยวกับสิ่งนี้ แต่ทั้งหมดที่ฉันได้รับคือลิงก์บางอันที่บอกให้ฉัน "โฮสต์รูปภาพบนเว็บและระบุเส้นทางรูปภาพในไฟล์ README.md"

มีวิธีการทำเช่นนี้โดยไม่ต้องโฮสต์รูปภาพในบริการเว็บโฮสติ้งบุคคลที่สามหรือไม่?



5
ซ้ำของstackoverflow.com/questions/10189356/ซึ่งโพสต์ในปี 2012
leetNightshade

86
ไม่ใช่นอกหัวข้อ GitHub เป็นเครื่องมือของโปรแกรมเมอร์
แลนซ์โรเบิร์ต

คำตอบ:


1883

ลองทำเครื่องหมายนี้:

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

ฉันคิดว่าคุณสามารถเชื่อมโยงโดยตรงไปยังรูปภาพรุ่น raw หากเก็บไว้ในที่เก็บของคุณ กล่าวคือ

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

137
คุณควรพิจารณาใช้ลิงก์ที่เกี่ยวข้อง
mgalgs

53
ลิงก์สัมพัทธ์ไม่ได้เป็นประโยชน์อย่างมากในที่นี้ลองจินตนาการว่า readme ของคุณจะแสดงในเวลา 23.00 น. ที่ไม่ได้โฮสต์ภาพด้วยวิธีนี้ - มันต้องเชื่อมโยงกับ GitHub srcs ของรูปภาพควรอยู่ในโดเมนgithub.comไม่ใช่โดเมนย่อยraw.github.comและไม่ใช่โดเมนraw.githubusercontent.com
Lee Crossley

4
จริงๆแล้วฉันจะไปกับเส้นทางญาติ (ซึ่งสำหรับฉันเป็นเพียงชื่อของไฟล์ภาพเพราะฉันมีทุกอย่างในราก) ฉันดูแลรักษา README.md จำนวน 2 ชุดสำเนาหนึ่งสำหรับการติดตั้งในท้องถิ่นใน / usr / share / projectname / docs และอีกหนึ่งสำเนาสำหรับ github ตอนนี้ฉันสามารถใช้ README.md เดียวกันสำหรับทั้งคู่เนื่องจากชื่อไฟล์รูปภาพทำงานได้ดีในทั้งสองกรณี ถ้าฉันต้องการโพสต์สำเนาของส่วน README ของฉันที่อื่นฉันจะต้องโฮสต์รูปภาพไว้ที่อื่นหรือใส่ URL raw.github.com
โคลินคีแนน

14
GitHub แนะนำเส้นทางที่เกี่ยวข้อง: help.github.com/articles/relative-links-in-readmesข้อเสียที่สำคัญประการหนึ่งของเส้นทางสัมบูรณ์คือหากรูปภาพถูกย้ายในรูปแบบต้นแบบสาขาอื่น ๆ ที่ยังคงชี้ไปที่ URL เก่าจะแตก
Jack O'Connor

3
โดเมนที่แนะนำในปัจจุบันดูเหมือนจะไม่ทำงานและลิงก์ควรเป็นดังนี้:https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true
Slavik Shynkarenko

424

คุณยังสามารถใช้เส้นทางสัมพัทธ์เช่น

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

15
ใช่. นี่เป็นวิธีที่ง่ายที่สุดเว้นแต่คุณจะกังวลเรื่องประสิทธิภาพฉันทราบว่านี่สัมพันธ์กับไดเรกทอรีไม่ใช่repoดังนั้นหากคุณมี 'myimage.png' ใน dir เดียวกับ 'about_pics.md' มาร์กอัปคือ:![What is this](myimage.png)
Rich

5
นี่เป็นทางออกที่ยอดเยี่ยมเพราะ 1) ใช้งานได้ 2) รูปภาพจะแสดงในมุมมองท้องถิ่นโดยไม่จำเป็นต้องเชื่อมต่ออินเทอร์เน็ต
Régis B.

2
@Rich คุณสามารถขยายความคิดเห็นของคุณเกี่ยวกับประสิทธิภาพ มีปัญหาเรื่องประสิทธิภาพใดบ้างที่เกี่ยวข้องกับแนวทางพา ธ ที่สัมพันธ์
Lea Hayes

2
เส้นทางนี้สัมพันธ์กับอะไร?
Dims

2
ตามที่ Lee Crossley ชี้ให้เห็นคุณควรหลีกเลี่ยงการเชื่อมโยงที่สัมพันธ์กันเพราะจะแตกเมื่อ readme ของคุณปรากฏขึ้นที่ npm ให้ลิงก์ไปยังรูปภาพ src บนโดเมน github.comด้วยแฟล็ก "? 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
คำตอบนี้ใช้ได้อย่างสมบูรณ์แบบสำหรับฉันและไม่จำเป็นต้องบันทึกปัญหาใหม่ภายใน repo ฉันได้พบวิดีโอบน YouTube ที่อธิบายว่าในรายละเอียด: youtube.com/watch?v=nvPOUdz5PL4
Francislainy Campos

1
คำตอบนี้ใช้ได้ผลและต้องการความพยายามเพียงเล็กน้อย ปัญหานี้สามารถยกเลิกได้ แต่ URL ของรูปภาพยังคงมีอยู่ URL รูปภาพอยู่ในรูปแบบของ: user-images.githubusercontent.com ...
Sabuncu

6
นี่เป็นเคล็ดลับที่ยอดเยี่ยม! แต่ไม่มีใครรู้คำตอบสำหรับคำถามของ @ peterh GitHub จะกำจัดภาพที่กำพร้าเป็นระยะ ๆ หรือไม่ (เช่นไม่มีปัญหาที่แนบมา)
Johnny Oshika

1
@JohnnyOshika ฉันสงสัยว่าใครก็ตามที่อยู่นอก GitHub สามารถตอบได้อย่างแน่นอน อาจขึ้นอยู่กับ "user-images.githubusercontent.com" ที่ใช้ หากเป็นเพียงสำหรับภาพที่อัพโหลดไปยังความคิดเห็นก็เป็นไปได้ว่าพวกเขาสามารถสแกนหาข้อมูลที่หายไปและลบภาพ ถ้ามันกว้างกว่าปกติมันอาจจะยากที่จะระบุได้อย่างแน่นอนว่าไม่มีการอ้างอิงไปยังไฟล์ทำให้ราคาแพงหรือมีความท้าทายในการพิจารณาว่าไฟล์นั้นสามารถลบได้โดยไม่มีปัญหา
yourbuddypal

127

มันง่ายกว่านั้นมาก

เพียงอัปโหลดรูปภาพของคุณไปยังรูทพื้นที่เก็บข้อมูลและลิงก์ไปยังชื่อไฟล์โดยไม่มีเส้นทางใด ๆ เช่น:

![Screenshot](screenshot.png)

10
ไม่ฉันไม่คิดว่าการเพิ่มภาพหน้าจอใน repo git นั้นเป็นวิธีปฏิบัติที่ดี โดยเฉพาะอย่างยิ่งไม่ได้อยู่ที่ราก คำตอบของ Ahmad Ajmi ดีกว่ามาก
Arnaud P

25
ไม่ได้อยู่ที่รูท แต่คุณสามารถปรับให้เข้ากับdocs/imagesสิ่งนี้หรือหน้าจอ png ขนาดเล็กได้อย่างง่ายดายIMHO
Christophe Roussy

5
นี่ควรเป็นทางออกที่ได้รับการยอมรับ ด้วยข้อเสนอแนะของ Christophe ในการวางภาพภายใต้ doc / tree /
Mike Ellis

ที่สมบูรณ์แบบ .. !! ถ้า png อยู่ในโฟลเดอร์อื่น เพียงเพิ่มเส้นทาง "folderName / screenshot.png"
Soumen

ฉันพบว่าคำตอบของคุณมีประโยชน์สำหรับกรณีของฉัน: ฉันใช้ Gitlab และฉันใช้logo.pngรูปภาพที่รากของ repo เพื่อตั้งค่า avatar เป็น repo ฉันต้องการรวมภาพนี้ไว้ใน 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
เมื่อคุณใช้แท็ก HTML ภายในไฟล์มาร์คดาวน์ของคุณ มันจะถูกละเว้นโดยPandocตัวแปลงเอกสารสากล
Lorem Ipsum Dolor

1
สิ่งนี้ดีที่สุดดังนั้นจึงสามารถจัดกึ่งกลางหรือวางไว้ด้านหนึ่ง (สำหรับรูปภาพขนาดเล็กอย่างน้อย)
Alexis Wilke

คุณจะระบุเส้นทางสัมพัทธ์ได้อย่างไร ไม่สัมพันธ์กับ README.md (ในทุกกรณีหรือไม่)
friederbluemle

55

โซลูชันที่โพสต์จำนวนมากไม่สมบูรณ์หรือไม่เหมาะกับฉัน

  • CDN ภายนอกเช่น imgur เพิ่มเครื่องมืออื่นลงในเชน Meh
  • การสร้างปัญหาจำลองในตัวติดตามปัญหาคือแฮ็ค มันสร้างความยุ่งเหยิงและสร้างความสับสนให้ผู้ใช้ มันเป็นความเจ็บปวดที่จะโยกย้ายโซลูชันนี้ไปยังที่แยกหรือปิด GitHub
  • การใช้สาขา gh-pages ทำให้ URL นั้นเปราะ บุคคลอื่นที่ทำงานในโครงการที่ดูแลหน้า gh อาจไม่ทราบว่าสิ่งภายนอกขึ้นอยู่กับเส้นทางไปยังภาพเหล่านี้ สาขา gh-pages มีพฤติกรรมเฉพาะใน GitHub ซึ่งไม่จำเป็นสำหรับการโฮสต์อิมเมจ CDN
  • การติดตามสินทรัพย์ในการควบคุมเวอร์ชันเป็นสิ่งที่ดี เมื่อโครงการเติบโตและเปลี่ยนแปลงมันเป็นวิธีที่ยั่งยืนมากขึ้นในการจัดการและติดตามการเปลี่ยนแปลงโดยผู้ใช้หลายคน
  • หากภาพนำไปใช้กับการแก้ไขเฉพาะของซอฟต์แวร์มันอาจจะดีกว่าที่จะเชื่อมโยงภาพที่ไม่เปลี่ยนรูป ด้วยวิธีนี้หากภาพได้รับการปรับปรุงในภายหลังเพื่อสะท้อนการเปลี่ยนแปลงของซอฟต์แวร์ทุกคนที่อ่าน readme ของการแก้ไขนั้นจะพบภาพที่ถูกต้อง

วิธีการแก้ปัญหาที่ต้องการของฉันแรงบันดาลใจจากกระทู้นี้คือการใช้สาขาสินทรัพย์กับPermalinks มีการแก้ไขที่เฉพาะเจาะจง

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.

สร้าง "permalink" เพื่อแก้ไขภาพและห่อใน Markdown

อย่างไรก็ตามการค้นหาการมอบหมาย SHA ด้วยมือนั้นไม่สะดวกดังนั้นในขณะที่ทางลัดกด Y เพื่อเชื่อมโยงไปยังไฟล์ในการกระทำที่เฉพาะเจาะจงตามหน้า help.github

หากต้องการแสดงภาพล่าสุดในสาขาสินทรัพย์ให้ใช้ URL blob:

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

(จากหน้าช่วยเหลือของ GitHub เดียวกันมุมมองไฟล์แสดงเวอร์ชันล่าสุดของสาขา )


2
นี่เป็นส่วนเติมเต็มที่ดีสำหรับคำตอบที่ได้รับการยอมรับ มีการติดตามเนื้อหาภาพไม่ได้อยู่ในรูปแบบต้นแบบไม่มีความยุ่งเหยิง แค่ระวังเรื่องgit reset --hard; ทำให้แน่ใจว่ามีการเปลี่ยนแปลง
dojuba

อยู่ในป่าบนเครื่องของคุณ คุณสามารถชี้ไปที่ใดก็ตามที่ไฟล์ที่จะเกิดขึ้น ( ~/Downloads, /tmpฯลฯ )
paulmelnikow

ฉันสาบานว่าฉันจำได้ว่ามีไดเรกทอรีที่คุณสามารถทำมันได้ซึ่งไม่ปรากฏใน Github จนกว่าฉันจะติดตามได้โพสต์นี้จะเป็นสิ่งที่ดีที่สุดในการใช้ ขอบคุณ!
Shadoninja

21

ยอมรับรูปภาพของคุณ ( image.png ) ในโฟลเดอร์ ( myFolder ) และเพิ่มบรรทัดต่อไปนี้ในREADME.mdของคุณ:

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


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

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

ทำ!

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

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


นี่เป็นวิธีที่ง่ายที่สุดในการเพิ่มพวกเขาในความคิดของฉัน เพียงแค่ลากเข้าไปในกล่องคัดลอกที่อยู่และวางลงใน readme ของคุณด้วยคำอธิบายภาพด้านล่าง บูมเสร็จแล้ว
Joe Hill

15

ฉันต้องรวมภาพบางส่วนไว้ในไฟล์ README ของฉัน ฉันไม่รู้จะทำยังไง

ฉันสร้างวิซาร์ดเล็ก ๆ ที่ช่วยให้คุณสร้างและปรับแต่งแกลเลอรี่ภาพง่าย ๆ สำหรับ readme ของที่เก็บ GitHub: ดูReadmeGalleryCreatorForGitHub ReadmeGalleryCreatorForGitHub

ตัวช่วยสร้างการใช้ประโยชน์จากความจริงที่ว่า GitHub ช่วย img README.mdแท็กที่จะเกิดขึ้นใน นอกจากนี้ตัวช่วยสร้างใช้เคล็ดลับที่เป็นที่นิยมในการอัปโหลดภาพไปยัง GitHub โดยการลากไปมาในพื้นที่ปัญหา (ดังที่ได้กล่าวไว้แล้วในคำตอบหนึ่งในกระทู้นี้)

ป้อนคำอธิบายรูปภาพที่นี่


2
รักเครื่องมือนี้!
ด่าน

1
ฉันชอบเครื่องมือนี้มากเกินไปนี่ควรเป็นคุณสมบัติเริ่มต้นของ Git !!
shridutt kothari

14

เพียงเพิ่ม <img>แท็กใน README.md ของคุณด้วย src ที่สัมพันธ์กับที่เก็บของคุณ หากคุณไม่ได้ใช้ src แบบสัมพัทธ์ตรวจสอบให้แน่ใจว่าเซิร์ฟเวอร์รองรับ CORS

ใช้งานได้เนื่องจาก GitHub รองรับinline-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: ทรัพยากรภาพของคุณคืออะไร URI ของภาพ

ตัวอย่าง:

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

สิ่งนี้จะมีลักษณะดังนี้:

ภาพล้นสแต็กโดย alamin


10

ใช้ตารางเพื่อโดดเด่นมันจะให้เสน่ห์แยกต่างหาก

ไวยากรณ์ตารางคือ:

คั่นแต่ละคอลัมน์ของเซลล์ด้วยสัญลักษณ์ |

และส่วนหัวของตาราง (แถวแรก) โดยแถวที่ 2 โดย ---


| col 1 | col 2 |
| ------------ | ------------- |
| ภาพ 1 | ภาพ 2 |

เอาท์พุต

ป้อนคำอธิบายรูปภาพที่นี่


ทีนี้ก็ใส่<img src="url/relativePath">รูปที่ 1 และรูปที่ 2 ถ้าคุณใช้สองรูป


หมายเหตุ: หากใช้หลายภาพเพียงแค่ใส่คอลัมน์มากขึ้นคุณอาจใช้แอตทริบิวต์ความกว้างและความสูงเพื่อทำให้อ่านง่าย

ตัวอย่าง


| col 1 | col 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
การใช้ตารางไม่เกี่ยวข้องกับหัวข้อของคำถามของ OP
mhucka

1
การเพิ่มภาพหน้าจอของแอปสามารถทำได้ด้วยวิธีนี้ได้เป็นอย่างดีขอบคุณ
UpaJah

ใช้ CSS แทน Tables มันจะเขย่าโลกของคุณ
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
สมบูรณ์แบบและคมชัด
Biswajit Das

1
ใช้งานได้จริงฉันคิดว่าคำตอบนี้ควรได้รับการยอมรับ
Luk Aron

8

ในกรณีของฉันฉันใช้imgurและใช้ลิงก์โดยตรงด้วยวิธีนี้

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

8

คุณสามารถเชื่อมโยงไปยังรูปภาพในโครงการของคุณจาก README.md (หรือภายนอก) โดยใช้ลิงค์ CDN gitHub ทางเลือก

URL จะมีลักษณะดังนี้:

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

ฉันมีภาพ SVG ในโครงการของฉันและเมื่อฉันอ้างอิงในเอกสารโครงการ Python ของฉันมันจะไม่แสดงผล

ลิงค์โครงการ

นี่คือลิงค์โครงการไปยังไฟล์ (ไม่แสดงเป็นรูปภาพ):

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

ตัวอย่างภาพฝังตัว: ภาพ

ลิงก์ดิบ

นี่คือลิงก์ RAW ไปยังไฟล์ (ยังไม่แสดงผลเป็นรูปภาพ):

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

ตัวอย่างภาพฝังตัว: ภาพ

ลิงค์ CDN

ใช้ลิงค์ CDN ฉันสามารถเชื่อมโยงไปยังไฟล์โดยใช้ (แสดงผลเป็นภาพ):

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

ตัวอย่างภาพฝังตัว: ภาพ

นี่คือวิธีที่ฉันสามารถใช้รูปภาพจากโครงการของฉันทั้งในREADME.mdไฟล์ของฉันและใน PyPi ของฉันโครงการ reStructredText doucmentation PyPi ( ที่นี่ )


7

ฉันได้แก้ไขปัญหานี้แล้ว คุณต้องอ้างถึงไฟล์ readme ของคนอื่นเท่านั้น

ตอนแรกคุณควรอัปโหลดไฟล์ภาพไปยังไลบรารีรหัส github! จากนั้นอ้างอิงโดยตรงไปยังที่อยู่ของไฟล์ภาพ



ป้อนคำอธิบายรูปภาพที่นี่

ป้อนคำอธิบายรูปภาพที่นี่


6

ฉันมักจะโฮสต์ภาพในเว็บไซต์นี้สามารถเชื่อมโยงไปยังภาพที่โฮสต์ เพียงแค่โยนสิ่งนี้ใน readme ใช้งานได้กับ.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. บนระบบที่ใช้ GNU / Linux และ Unix สามารถทำได้ผ่าน:

    cd project_folder
    mkdir doc
    git add doc
    
  3. คัดลอกวางรูปภาพใด ๆ ลงในโฟลเดอร์ doc หลังจากนั้นเพิ่มgit addคำสั่งเหล่านั้นด้วยคำสั่ง

  4. มุ่งมั่นและผลักดัน

  5. ภาพที่มีอยู่ในที่สาธารณะต่อไปนี้:

    https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ สาขา ^ / ^ image_location ใน repo ^

โดยที่: * ^github_username^เป็นชื่อผู้ใช้ใน github (คุณสามารถหาได้ในหน้าโปรไฟล์) * ^repo_name^คือชื่อที่เก็บ * ^branch^เป็นสาขาที่เก็บซึ่งมีการอัพโหลดรูปภาพ * ^image_location in the repo^เป็นที่ตั้งรวมถึงโฟลเดอร์ที่เก็บรูปภาพไว้

นอกจากนี้คุณสามารถอัปโหลดภาพก่อนจากนั้นเยี่ยมชมสถานที่ในหน้า GitHub โครงการของคุณและนำทางผ่านจนกว่าคุณจะพบภาพจากนั้นกด downloadปุ่มแล้วคัดลอกวาง URL จากแถบที่อยู่ของเบราว์เซอร์

ดูนี่จากโครงการของฉันเป็นข้อมูลอ้างอิง

จากนั้นคุณสามารถใช้ url เพื่อรวมไว้โดยใช้ไวยากรณ์ markdown ดังกล่าวข้างต้น:

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

เช่น: ให้เราสมมติว่าเราใช้รูปนี้จากนั้นคุณสามารถใช้ไวยากรณ์ markdown:

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

5

เพียงแค่ทำงานนี้ !!

ใช้ความระมัดระวังเกี่ยวกับชื่อไฟล์ของคุณเป็นตัวพิมพ์ใหญ่ในแท็กและวางไฟล์ PNG inroot และเชื่อมโยงไปยังชื่อไฟล์โดยไม่มีพา ธ ใด ๆ :

![Screenshot](screenshot.png)

5

ฉันแค่ขยายหรือเพิ่มตัวอย่างในคำตอบที่ยอมรับแล้ว

เมื่อคุณวางภาพบน repo Github ของคุณ

แล้ว:

  • เปิด repo Github ที่เกี่ยวข้องบนเบราว์เซอร์ของคุณ
  • นำทางไปยังไฟล์ภาพเป้าหมายจากนั้นเปิดภาพในแท็บใหม่ เปิดภาพในแท็บใหม่
  • คัดลอก URL คัดลอก 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
นี่เป็นสิ่งเดียวที่ทำงานได้อย่างไม่มีที่ติสำหรับฉัน ไม่สับสนเกี่ยวกับเส้นทางไม่ว่าจะเป็น "master" หมายถึงไดเรกทอรีหรือสาขาที่รูตเริ่มต้นเป็นต้นเฉพาะ caveat คือ Firefox (72) ไม่อนุญาตให้คุณเปิดภาพในแท็บแยกดังนั้น Chrome สำหรับฉันตอนนี้เท่านั้น คิด.
โทมัสบราวน์

5

มี 2 ​​วิธีง่ายๆที่คุณสามารถทำได้

1) ใช้แท็ก HTML img

2)! [] (เส้นทางที่บันทึกรูปภาพของคุณ / image-name.png)

เส้นทางที่คุณจะสามารถคัดลอกจาก URL ในเบราว์เซอร์ในขณะที่คุณเปิดภาพนั้น อาจมีปัญหาเกิดขึ้นของการเว้นวรรคดังนั้นตรวจสอบให้แน่ใจว่ามีช่องว่างใด ๆ b / w สองคำของเส้นทางหรือในชื่อภาพเพิ่ม ->% 20 เช่นเดียวกับเบราว์เซอร์ทำ

ทั้งคู่ใช้งานได้ถ้าคุณต้องการที่จะเข้าใจมากขึ้นคุณสามารถตรวจสอบ GitHub ของฉัน -> https://github.com/adityarawat29


สิ่งนี้ได้ผลสำหรับฉัน มีภาพในโฟลเดอร์ "แอพ" ภายใต้ README.md ฉันเคยใช้:![](images/ss_apps.png)
cdsaenz

1
ฉันประหลาดใจที่มีเพียง Aditya ที่กล่าวถึงช่องว่างที่มีปัญหาและในทางที่ค่อนข้างโง่เช่นกัน - ไม่มีข้อผิดพลาด แต่ไวยากรณ์ของคุณจะปรากฏขึ้นโดยไม่มีลักษณะเช่นนั้น โหวตจากฉันสำหรับพูดถึงสิ่งนี้
Tammi

5

คำตอบนี้สามารถพบได้ที่: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

แสดงภาพจาก repo โดยใช้:

โดเมนล่วงหน้า: https://raw.githubusercontent.com/

ผนวกธง: ?sanitize=true&raw=true

ใช้<img />แท็ก

Eample url ใช้ได้กับ svg, png และ jpg โดยใช้:
  • โดเมน :raw.githubusercontent.com/
  • ชื่อผู้ใช้ :YourUserAccount/
  • Repo :YourProject/
  • สาขา :YourBranch/
  • เส้นทาง :DirectoryPath/
  • ชื่อไฟล์ :example.png

ใช้งานได้กับ SVG, PNG และ JPEG

 - `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 -in-markdown / readme.md


มันไม่ทำงานสำหรับฉันจนกว่าฉันจะลบสตริงแบบสอบถาม
mhenry1384

1
อย่างน้อยสำหรับ. png และ raw.githubusercontent.com sanitize = true ไม่ทำงานและควรลบออก raw = งานได้ดีจริง github.com/sphinxy/AppDynamics.Playground/blob/master/README.md
Danila Polevshikov

1
rawgit.comปิดตัวลงในปี 2018 และไม่ควรใช้อีกต่อไป คุณควรลบมันออกจากคำตอบนี้ raw.githubusercontent.comซึ่งคุณพูดถึงเป็นทางเลือกที่ใกล้เคียงที่สุด
Rory O'Kane

4

ฉันได้พบวิธีแก้ไขปัญหาอื่น แต่แตกต่างกันมากและฉันจะอธิบาย

โดยทั่วไปฉันใช้แท็กเพื่อแสดงภาพ แต่ฉันต้องการไปที่หน้าอื่นเมื่อมีการคลิกที่ภาพและนี่คือวิธีที่ฉันทำ

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

หากคุณวางไว้ติดกันคั่นด้วยบรรทัดใหม่ฉันเดาว่าเมื่อคุณคลิกที่ภาพมันจะไปที่แท็กที่มี href ไปยังเว็บไซต์อื่นที่คุณต้องการเปลี่ยนเส้นทาง


2

ล่าสุด

Wikis สามารถแสดงรูปภาพ PNG, JPEG หรือ GIF

ตอนนี้คุณสามารถใช้:

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

-หรือ-

ทำตามขั้นตอนเหล่านี้:

  1. บน GitHub ไปที่หน้าหลักของที่เก็บ

  2. ภายใต้ชื่อที่เก็บของคุณคลิก Wiki

  3. ใช้แถบข้างวิกินำทางไปยังหน้าที่คุณต้องการเปลี่ยนแปลงแล้วคลิกแก้ไข

  4. บนแถบเครื่องมือวิกิพีเดีย, คลิกที่ภาพ

  5. ในกล่องโต้ตอบ "แทรกภาพ" ให้พิมพ์ URL รูปภาพและข้อความ alt (ซึ่งเครื่องมือค้นหาและโปรแกรมอ่านหน้าจอใช้)
  6. คลิกตกลง

โปรดดูเอกสาร


2

พิจารณาใช้ a tableหากเพิ่มภาพหน้าจอหลายหน้าจอและต้องการจัดแนวภาพเหล่านั้นโดยใช้ข้อมูลแบบตารางเพื่อการเข้าถึงที่ดีขึ้นดังที่แสดงที่นี่:

สูงชา

หาก markdown parser ของคุณรองรับคุณยังสามารถเพิ่มrole="presentation"แอททริบิวต์ WIA-ARIA ให้กับองค์ประกอบ TABLE และละเว้นthแท็กได้


2

กระบวนการทีละขั้นตอนสร้างโฟลเดอร์ (ชื่อโฟลเดอร์ของคุณ) และเพิ่มรูปภาพ / ภาพที่คุณต้องการอัปโหลดในไฟล์ Readme.md (คุณสามารถเพิ่มภาพ / ภาพในโฟลเดอร์ที่มีอยู่ของโครงการของคุณ) ตอนนี้คลิกที่ไอคอนแก้ไขของไฟล์ 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 -> โฟลเดอร์หลัก -> โฟลเดอร์ res -> โฟลเดอร์ drawable -> และภายในไฟล์ refrence_image.png ภายในโฟลเดอร์ drawable สำหรับการเพิ่มหลายภาพคุณสามารถทำได้เช่นนี้

![](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 หรือมีวิธีอื่น คุณสามารถ google มันเพิ่มเติม ถ้าคุณต้องการมัน

หลังจากนี้ให้เขียนข้อความกระทำการเปลี่ยนแปลงของคุณแล้วส่งมอบการเปลี่ยนแปลงของคุณ

มีแฮ็กอื่น ๆ อีกมากมายที่ทำเช่นสร้างปัญหาและอื่น ๆ และอื่น ๆ โดยไกลนี้เป็นวิธีที่ดีที่สุดที่ฉันได้เจอ


1

เราสามารถทำสิ่งนี้ได้ง่ายๆ

  • สร้างฉบับใหม่บน GitHub
  • ลากและวางภาพในส่วนdivของปัญหา

หลังจากนั้นไม่กี่วินาทีลิงก์จะถูกสร้างขึ้น ตอนนี้คัดลอกลิงค์หรือ URL ภาพและใช้แพลตฟอร์มใดก็ได้ที่รองรับ


โซลูชันของคุณใช้งานได้! มันง่ายมาก ขอบคุณ
Jeanne vie

1

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

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

1

ยังมีอีกตัวเลือกหนึ่งที่ฉันไม่เคยเห็นมาก่อน คุณสามารถสร้างพื้นที่เก็บข้อมูลอื่นภายใต้ผู้ใช้หรือองค์กรของคุณที่เรียกว่า "ทรัพย์สิน" ผลักดันภาพของคุณไปที่ repo นี้และอ้างอิงจาก repos อื่น ๆ ของคุณ:

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

ฉันทำสิ่งนี้ในหนึ่งในreposของฉันและมันเหมาะกับฉันดี ฉันสามารถรุ่นภาพ README ของฉันสำหรับทุกโครงการของฉันเป็นอิสระจากรหัสของฉัน แต่ยังคงให้พวกเขาทั้งหมดในหนึ่งสถานที่ ไม่มีปัญหาหรือสาขาหรือสิ่งประดิษฐ์ที่วางผิดที่อื่น ๆ ได้อย่างง่ายดาย

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.