Bagaimana cara menambahkan tangkapan layar ke README di repositori github?


595

Apakah mungkin untuk menempatkan tangkapan layar di file README dalam repositori GitHub? Apa sintaksinya?


1
Solusi yang tepat untuk ini adalah dengan menggunakan referensi relatif, per jawaban ini stackoverflow.com/a/11916467/1633251 (lihat komentar dengan tautan ke dokumen github baru tentang cara melakukan ini). Jawaban singkatnya adalah menggunakan[Read more words!](docs/more_words.md)
David H

2
Sebagian besar solusi mengusulkan untuk menunjuk ke repo itu sendiri. Bagaimana jika Anda ingin menghindari binari dalam repo (bahkan di cabang terpisah, seperti yang diusulkan) dan Anda ingin menyimpannya di tempat eksternal? Adakah praktik yang baik? Sebuah inti mungkin (IDK jika inti dapat berupa biner atau hanya teks)? membuat repo "myproject-asset" lain untuk proyek "myproject"? Adakah tempat gambar populer eksternal yang mirip dengan standar de-facto youtube untuk mengunggah video?
Xavi Montero


Jawaban:


852

Jika Anda menggunakan Markdown (README.md):

Asalkan Anda memiliki gambar di repo Anda, Anda dapat menggunakan URL relatif:

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

Jika Anda perlu menyematkan gambar yang dihosting di tempat lain, Anda dapat menggunakan URL lengkap

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

GitHub merekomendasikan Anda menggunakan tautan relatif dengan ?raw=trueparameter untuk memastikan titik reposisi bercabang dengan benar.

The raw=trueparameter yang ada untuk memastikan gambar yang link ke, akan diberikan seperti. Itu berarti bahwa hanya gambar yang akan ditautkan, bukan seluruh antarmuka GitHub untuk file tersebut. Lihat komentar ini untuk lebih jelasnya.

Lihatlah sebuah contoh: https://raw.github.com/altercation/solarized/master/README.md

Jika Anda menggunakan SVGs maka Anda harus mengatur atribut membersihkan untuk truejuga: ?raw=true&sanitize=true. (Terima kasih @EliSherer)

Juga, dokumentasi tentang tautan relatif dalam file README: https://help.github.com/articles/relative-links-in-readmes

Dan tentu saja dokumen penurunan harga: http://daringfireball.net/projects/markdown/syntax

Selain itu, jika Anda membuat cabang baru screenshotsuntuk menyimpan gambar, Anda bisa menghindarinya berada di masterpohon kerja

Anda dapat menanamkannya menggunakan:

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

1
Yah, saya menambahkan dokumen resmi pada tautan relatif, tetapi saya tidak dapat menemukan beberapa repo yang menggunakannya, jika Anda memiliki saran, saya akan dengan senang hati membantu karena seluruh poinnya adalah membantu lebih banyak orang, tidak tinggal dalam ruang lingkup (kesalahan saya di sini).
Paul

2
@ Paul, inilah contoh repositori yang melakukan hal itu! github.com/Tarrasch/zsh-bd
Tarrasch

4
github.com/altercation/solarized adalah versi yang diberikan dari contoh di atas, dalam kasus yang membantu siapa pun.
barrycarter

3
Ketika Anda mengatakan /relative/path/to/img.jpg, bukankah itu jalur absolut karena garis miring utama?
jww

1
@kelvin, raw=trueparameternya ada untuk membuat gambar yang ditunjuk jalur GitHub, bukan antarmuka GitHub. Coba dan lihat perbedaannya: github.com/altercation/solarized/blob/master/img/… vs github.com/altercation/solarized/blob/master/img/… . URL pertama akan menampilkan antarmuka GitHub dan gambar, sedangkan URL kedua hanya menampilkan gambar. Tautan relatif masih berguna saat kloning / forking repo, jadi ya Anda harus menggunakan jalur relatif dengan parameter itu, tetapi mereka adalah dua konsep yang berbeda.
Paul

70

Meskipun sudah ada jawaban yang diterima, saya ingin menambahkan cara lain untuk mengunggah gambar ke readme di GitHub.

  • Anda perlu membuat masalah di repo Anda
  • Seret dan lepas di area komentar gambar Anda
  • Setelah tautan untuk gambar dibuat, masukkan ke readme Anda

Lebih detail bisa Anda temukan di sini


6
Saya tertarik berapa lama gambar ini dimuat akan hidup. Apakah github melakukan pembersihan beberapa gambar? Seperti, "jika gambar ini tidak dirujuk dari masalah github, saya dapat menghapusnya dengan aman" ...
artin

1
@Artin mungkin hanya ketika masalah dihapus sepenuhnya. Masalah tertutup bertahan selamanya karena mereka memainkan peran yang sangat penting dalam dokumentasi dan debugging
andrhamm

55

Saya menemukan bahwa jalur ke gambar di repo saya tidak cukup, saya harus menautkan ke gambar di raw.github.comsubdomain.

Format URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Contoh penurunan harga ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)


4
Downvoting ini karena komentar @sorens pada jawaban yang diterima. Adalah buruk untuk menentukan bak mandi absolut karena itu tidak akan bekerja dengan baik pada repositori bercabang. (Atau jika Anda mengganti nama repo, atau jika github mengubah nama domain, dll.)
Linus Unnebäck

7
@ LinusUnnebäck: Ada satu alasan bagus untuk menggunakan path absolut imho: Jika readme.md digunakan di tempat lain juga, misalnya, sebagai halaman utama Doxygen. Tautan relatif tidak akan berfungsi saat itu.
Ela782

1
@ Ela782 meskipun, pada catatan lebih lanjut, itu seharusnya tidak menjadi masalah untuk perangkat lunak yang merobek file README khusus dari GitHub ; perangkat lunak tersebut harus tahu untuk menyelesaikan URL relatif dengan benar. npm tidak , misalnya.
Mark Amery

cara menautkan ke gambar di raw.github.comsubdomain? tempat mengunggah file gambar?
Saif

@Saif raw.github.com hanyalah cerminan dari apa yang dilakukan pada repositori github Anda. Cukup komit gambar ke repositori Anda dan ikuti format URL yang ditentukan.


21

Satu baris di bawah ini adalah apa yang Anda cari

jika file Anda di repositori

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

jika file Anda ada di url eksternal lain

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

2
sarankan menggunakan tautan relatif file gambar, lihat Tautan relatif di READMEs - Bantuan Github
shaobin0604

2
-1 untuk alasan yang diberikan oleh @ shaobin0604; dokumen resmi merekomendasikan penggunaan tautan relatif ketika menautkan ke file dalam repo Anda sendiri, sehingga tautan tersebut menunjuk ke tempat yang tepat ketika bercabang dua.
Mark Amery

17

Sintaks markdown untuk menampilkan gambar memang:

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

TAPI: Bagaimana cara menyediakannya url?

  • Anda mungkin tidak ingin mengacaukan repo Anda dengan tangkapan layar, itu tidak ada hubungannya dengan kode
  • Anda mungkin tidak ingin berurusan dengan kerumitan membuat gambar Anda tersedia di web ... (unggah ke server ...).

Jadi ... Anda dapat menggunakan trik luar biasa ini untuk menjadikan github meng-host file gambar Anda. TDLR:

  1. buat masalah pada daftar masalah repo Anda
  2. seret dan lepas tangkapan layar Anda tentang masalah ini
  3. salin kode penurunan harga yang baru saja dibuat github agar Anda dapat menampilkan gambar Anda
  4. tempel di readme Anda (atau di mana pun Anda inginkan)

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


7

Jauh lebih sederhana daripada menambahkan URL. Cukup unggah gambar ke repositori yang sama, seperti:

![Screenshot](screenshot.png)


7

tambahkan ini ke README

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

4

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

  • Buat masalah tentang penambahan gambar
  • Tambahkan gambar dengan drag and drop atau dengan pemilih file
  • Kemudian salin sumber gambar

  • Sekarang tambahkan ![Screenshot](http://url/to/img.png)ke file README.md Anda

Selesai!

Atau Anda dapat menggunakan beberapa situs hosting gambar seperti imgurdan mendapatkan url dan menambahkannya dalam file README.md Anda atau Anda dapat menggunakan beberapa hosting file statis juga.

Masalah sampel


Saya melakukan ini sejak lama, sekarang gambar tidak tersedia. Jadi saya tidak merekomendasikan ini.
Namek

Anda selalu dapat menggunakan imgur atau beberapa cdn gambar khusus dalam kasus itu :)
abe312

4

Metode 1-> Cara penurunan harga

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

Metode 2-> Cara HTML

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

atau

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

Catatan -> Jika Anda tidak ingin menata gambar, mis. Mengubah ukuran, hapus bagian gaya


1

Pertama, buat direktori (folder) di root repo lokal Anda yang akan berisi yang screenshotsingin Anda tambahkan. Sebut nama direktori ini screenshots. Tempatkan gambar (JPEG, PNG, GIF, `dll) yang ingin Anda tambahkan ke direktori ini.

Tangkapan Layar Android Studio Workspace

Kedua, Anda perlu menambahkan tautan ke setiap gambar ke dalam README Anda. Jadi, jika saya memiliki nama gambar 1_ArtistsActivity.pngdan 2_AlbumsActivity.pngdalam direktori screenshot saya, saya akan menambahkan tautannya seperti ini:

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

Jika Anda ingin setiap tangkapan layar pada baris yang terpisah, tulis tautannya pada baris yang berbeda. Namun, lebih baik jika Anda menulis semua tautan dalam satu baris, hanya dipisahkan oleh spasi. Ini mungkin sebenarnya tidak terlihat terlalu bagus tetapi dengan melakukannya GitHub secara otomatis mengaturnya untuk Anda.

Akhirnya, komit perubahan Anda dan dorong!


1

Saya mencari beberapa pertanyaan serupa di Google dan tidak melihat jawaban atas masalah saya dan solusi yang cukup sederhana / mudah.

Google Cloud Storage - pendekatan yang sedikit berbeda untuk gambar di READMEs

Begini: seperti OP, saya ingin gambar di Github README saya, dan, mengetahui sintaks Markdown untuk melakukannya, ketikkan:

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

Anda harus menyelesaikan pergantian yang sebenarnya di atas (mis. MY_IMAGE = image.jpg) agar ini berfungsi.

Tapi, tunggu ... gagal - tidak ada foto yang diberikan sebenarnya! Dan tautannya persis seperti yang diberikan oleh Google Storage!

tangkapan layar gagal unggah gambar Github

Github camo- Gambar Anonim

Github meng-host gambar Anda secara anonim , ya! Namun, ini menyajikan masalah untuk aset penyimpanan Google. Anda perlu mendapatkan url yang dihasilkan dari Google Cloud Console Anda.

Saya yakin ada cara yang lebih halus, namun, cukup kunjungi titik akhir URL yang Anda berikan dan salin URL yang panjang. Detail:

Instruksi

  1. Kunjungi konsol penyimpanan Anda: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
  2. Klik pada gambar yang ingin Anda tampilkan di Github (ini memunculkan halaman "Rincian Objek")
  3. Salin pasta URL itu (yang dimulai dengan httpstidak gs) ke tab / jendela browser baru
  4. Salin pasta URL yang dihasilkan baru - itu harus lebih lama - dari tab / jendela browser baru Anda ke file Github README Anda

Semoga ini membantu mempercepat dan memperjelas masalah ini untuk orang lain.


FYI - Tampaknya ada sesuatu yang berubah di Google atau Github. Saya memiliki beberapa gambar dalam README yang gagal melalui metode ini, dan beberapa bekerja pada sore hari 28 Maret 2020. YMMV di sini!
Jason R Stevens CFA

0

Bagi saya cara terbaik adalah -

  1. Buat masalah baru dengan repositori itu di github dan kemudian unggah file dalam format gif. Untuk mengonversi file video ke format gif, Anda dapat menggunakan situs web ini http://www.online-convert.com/
  2. Kirim masalah yang baru dibuat.
  3. Salin alamat file yang diunggah
  4. Akhirnya di file README Anda, pasang! [Demo] (ALAMAT YANG DI COPI)

Semoga ini bisa membantu.



0

Tambahkan gambar dalam repositori dari opsi unggah file kemudian dalam file README

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

-5

Dengan gambar-gambar yang terletak di /screen-shotsdirektori. Bagian luar <div>memungkinkan gambar diposisikan. Padding dicapai dengan menggunakan <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
Untuk kehidupan saya, saya tidak bisa memusatkan gambar di README - yang berisi jawaban Anda, jadi terima kasih!
Cody Reichert

Saya menemukan jawaban ini bermanfaat karena memungkinkan Anda untuk mengatur dimensi gambar
Stanley
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.