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

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")

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

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)

1. Unggah gambar Anda ke postimage.org
2. Dapatkan url Markdown github
3. Masukkan ReadMe Anda

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})

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/

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

![Screenshot](screenshot.png)

tambahkan ini ke README

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

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

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

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!

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!

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.

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.

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

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

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>