Pertanyaan Tambahkan gambar ke README.md di GitHub


Baru-baru ini saya bergabung GitHub. Saya menyelenggarakan beberapa proyek di sana.

Saya perlu menyertakan beberapa gambar di File README saya. Saya tidak tahu cara melakukannya.

Saya mencari tentang ini, tetapi yang saya dapatkan hanyalah beberapa tautan yang memberi tahu saya untuk "menyimpan gambar di web dan menentukan jalur gambar dalam file README.md".

Apakah ada cara untuk melakukan ini tanpa hosting gambar pada layanan hosting web pihak ketiga?


1069
2018-01-24 05:44


asal


Jawaban:


Coba penurunan harga ini:

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

Saya pikir Anda dapat menautkan langsung ke versi mentah dari sebuah gambar jika disimpan dalam repositori Anda. yaitu

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Edit: hanya perhatikan komentar yang menautkan ke artikel yang menyarankan menggunakan gh-pages. Selain itu, tautan relatif dapat menjadi ide yang lebih baik daripada URL mutlak yang saya posting di atas.


1132
2018-01-24 05:46



Anda juga dapat menggunakan path relatif seperti

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

182
2017-10-08 03:18



  • Anda dapat membuat Masalah Baru
  • unggah (drag & drop) gambar ke dalamnya
  • Salin URL gambar dan salin halaman URL gambar untuk Anda README.md file.

di sini adalah video youTube rinci menjelaskan ini secara detail:

https://www.youtube.com/watch?v=nvPOUdz5PL4


116
2017-10-28 06:03



Jauh lebih sederhana dari itu.

Cukup unggah gambar Anda ke akar repositori, dan tautkan ke nama file tanpa jalur apa pun, seperti:

![Screenshot](screenshot.png)

58
2017-07-08 20:07



Anda juga dapat menambahkan gambar dengan sederhana Tag 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>

58
2018-01-30 04:45



Banyak solusi yang diposting tidak lengkap atau tidak sesuai selera saya.

  • CDN eksternal seperti imgur menambahkan alat lain ke rantai. Meh.
  • Membuat masalah tiruan di pelacak masalah adalah peretasan. Ini menciptakan kekacauan dan membingungkan pengguna. Rasanya sakit untuk memindahkan solusi ini ke garpu, atau mematikan GitHub.
  • Menggunakan cabang gh-pages membuat URL menjadi rapuh. Orang lain yang mengerjakan proyek yang mempertahankan gh-page mungkin tidak mengetahui sesuatu yang eksternal bergantung pada jalan ke gambar-gambar ini. Cabang gh-halaman memiliki perilaku tertentu di GitHub yang tidak diperlukan untuk hosting gambar CDN.
  • Pelacakan aset dalam kontrol versi adalah hal yang baik. Seiring pertumbuhan proyek dan perubahan, ini adalah cara yang lebih berkelanjutan untuk mengelola dan melacak perubahan oleh banyak pengguna.
  • Jika suatu gambar berlaku untuk revisi spesifik dari perangkat lunak, mungkin lebih baik untuk menghubungkan gambar yang tidak berubah. Dengan begitu, jika gambar tersebut kemudian diperbarui untuk mencerminkan perubahan pada perangkat lunak, siapa pun yang membaca bahwa readme revisi akan menemukan gambar yang benar.

Solusi pilihan saya, terinspirasi oleh inti ini, adalah menggunakan cabang aset dengan permalinks ke revisi tertentu.

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 needed below.

Buat "permalink" untuk revisi gambar ini, dan bungkus dalam Markdown:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

misalnya

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

Untuk selalu menampilkan gambar terbaru di cabang aset, gunakan assets di tempat sha:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)


20
2018-03-08 17:13



Melakukan gambar Anda (image.png) dalam folder (folder saya) dan tambahkan baris berikut di README.md:

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


13
2018-06-14 10:01



Sintaksis Dasar

![myimage-alt-tag](url-to-image)

Sini:

  1. my-image-alt-tag: teks yang akan ditampilkan jika gambar tidak ditampilkan.
  2. url-to-image: apa pun sumber daya gambar Anda. URI gambar

Contoh:

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

Ini akan terlihat seperti berikut:

stack overflow image by alamin


11
2018-01-21 16:09



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

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

Selesai!

Atau Anda dapat menggunakan beberapa situs hosting gambar seperti imgur dan dapatkan urlnya dan tambahkan di file README.md Anda atau Anda dapat menggunakan beberapa file hosting statis juga.

Masalah sampel


11
2017-10-12 19:02