Baru-baru ini saya bergabung dengan GitHub . Saya menjadi tuan rumah beberapa proyek di sana.

Saya perlu memasukkan beberapa gambar dalam File README saya. Saya tidak tahu bagaimana melakukannya.

Saya mencari tentang ini, tetapi yang saya dapatkan hanyalah beberapa tautan yang memberitahu saya untuk "meng-host gambar di web dan menentukan jalur gambar dalam file README.md".

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

Coba penurunan harga ini:

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

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

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

Anda juga dapat menggunakan jalur relatif seperti

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

• Anda dapat membuat Masalah Baru
• unggah (seret & jatuhkan) gambar ke sana
• Salin URL gambar dan rekatkan ke file README.md Anda.

di sini adalah video youTube rinci menjelaskan ini secara rinci:

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

Jauh lebih sederhana dari itu.

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

![Screenshot](screenshot.png)

Anda juga dapat menambahkan gambar dengan tag HTML sederhana :

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

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

• CDN eksternal seperti imgur menambahkan alat lain ke rantai. Ah.
• Membuat masalah dummy di pelacak masalah adalah hack. Ini menciptakan kekacauan dan membingungkan pengguna. Sangat sulit untuk memigrasikan solusi ini ke garpu, atau mematikan GitHub.
• Menggunakan cabang gh-pages membuat URL rapuh. Orang lain yang bekerja pada proyek yang memelihara gh-page mungkin tidak tahu sesuatu eksternal tergantung pada jalur ke gambar-gambar ini. Cabang gh-halaman memiliki perilaku tertentu pada GitHub yang tidak diperlukan untuk hosting gambar CDN.
• Melacak aset di kontrol versi adalah hal yang baik. Seiring proyek tumbuh dan berubah, 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 menautkan gambar yang tidak dapat diubah. Dengan begitu, jika gambar nanti diperbarui untuk mencerminkan perubahan pada perangkat lunak, siapa pun yang membaca readme revisi itu akan menemukan gambar yang benar.

Solusi pilihan saya, terinspirasi oleh intisari ini , adalah dengan menggunakan cabang aset dengan permalink untuk 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 optional, you'll see below.

Bangun "permalink" untuk revisi gambar ini, dan bungkus dalam penurunan harga.

Akan tetapi, mencari SHA komit itu merepotkan, jadi sebagai pintasan tekan Y ke permalink ke file dalam komit tertentu seperti yang dikatakan help.github halaman ini.

Untuk selalu menampilkan gambar terbaru di cabang aset, gunakan URL gumpalan:

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

(Dari halaman bantuan GitHub yang sama Tampilan file menunjukkan versi terbaru pada cabang )

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

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

• Buat masalah tentang penambahan gambar
• Tambahkan gambar dengan drag and 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 imgurdan mendapatkan urlnya dan menambahkannya dalam file README.md Anda atau Anda dapat menggunakan beberapa hosting file statis juga.

Masalah sampel

Saya perlu memasukkan beberapa gambar dalam File README saya. Saya tidak tahu bagaimana melakukannya.

Saya membuat wizard kecil yang memungkinkan Anda untuk membuat dan menyesuaikan galeri gambar sederhana untuk readme repositori GitHub Anda: Lihat ReadmeGalleryCreatorForGitHub .

Wisaya mengambil keuntungan dari kenyataan bahwa GitHub memungkinkan tag img terjadi di README.md. Juga, wizard memanfaatkan trik populer untuk mengunggah gambar ke GitHub dengan menyeretnya ke area masalah (seperti yang telah disebutkan dalam salah satu jawaban di utas ini).

Cukup tambahkan <img> tag ke README.md Anda dengan src relatif ke repositori Anda. Jika Anda tidak menggunakan src relatif, pastikan server mendukung CORS.

Ini berfungsi karena GitHub mendukung inline-html

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

Amati di sini

Sintaks 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 gambar Anda. URI gambar

Contoh:

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

Ini akan terlihat seperti berikut:

Gunakan meja untuk menonjol, itu akan memberikan pesona tersendiri

Sintaks Tabel adalah:

Pisahkan setiap sel kolom dengan simbol |

dan tajuk tabel (Baris pertama) demi baris kedua ---

| col 1 | col 2 |
| ------------ | ------------- |
| gambar 1 | gambar 2 |

keluaran

Sekarang tinggal letakkan <img src="url/relativePath">di gambar 1 dan gambar 2 jika Anda menggunakan dua gambar

Catatan: jika menggunakan beberapa gambar hanya menyertakan lebih banyak kolom, Anda dapat menggunakan atribut width dan height untuk membuatnya terlihat mudah dibaca.

Contoh

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

Jarak tidak masalah

Output gambar

dibantu oleh: adam-p

Anda bisa melakukannya:

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

Kemudian Anda bisa mereferensikannya dalam READMEfile seperti ini:

![diagram](diagram.png)

Dalam kasus saya, saya menggunakan imgur dan menggunakan tautan langsung dengan cara ini.

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

Anda dapat menautkan ke gambar dalam proyek Anda dari README.md (atau secara eksternal) menggunakan tautan CDN github alternatif.

URL akan terlihat seperti ini:

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

Saya memiliki gambar SVG di proyek saya, dan ketika saya referensi di dokumentasi proyek Python saya, itu tidak membuat.

Tautan proyek

Berikut ini tautan proyek ke file (tidak ditampilkan sebagai gambar):

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

Contoh gambar yang disematkan:

Tautan mentah

Berikut ini tautan RAW ke file tersebut (masih tidak ditampilkan sebagai gambar):

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

Contoh gambar yang disematkan:

Tautan CDN

Menggunakan tautan CDN, saya dapat menautkan ke file menggunakan (menjadikan sebagai gambar):

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

Contoh gambar yang disematkan:

Ini adalah bagaimana saya dapat menggunakan gambar dari proyek saya di kedua README.mdfile saya , dan dalam proyek PyPi saya reStructredText doucmentation (di sini )

Saya telah memecahkan masalah ini. Anda hanya perlu merujuk ke file readme orang lain.

Pada awalnya, Anda harus mengunggah file gambar ke pustaka kode github! Kemudian rujukan langsung ke alamat file gambar.

Saya biasanya meng-host gambar di situs, ini dapat terhubung ke gambar yang di-host. Lemparkan saja ini ke readme. Bekerja untuk .rstfile, tidak yakin tentang.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %

Dalam kasus saya, saya ingin menampilkan layar cetak Githubtetapi juga aktif NPM. Meskipun menggunakan jalur relatif bekerja di dalam Github, itu tidak berfungsi di luarnya. Pada dasarnya, bahkan jika saya mendorong proyek saya NPMjuga (yang hanya menggunakan yang samareadme.md , gambar itu tidak pernah ditampilkan.

Saya mencoba beberapa cara, pada akhirnya inilah yang berhasil bagi saya:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Saya sekarang melihat gambar saya dengan benar di NPMatau di mana pun saya bisa mempublikasikan paket saya.

Jika Anda perlu mengunggah beberapa gambar untuk dokumentasi, pendekatan yang bagus adalah menggunakan git-lfs . Asumsikan Anda telah menginstal git-lfs ikuti langkah-langkah ini:

1. Intialize git lfs untuk setiap tipe gambar Anda:

   git lfs *.png
   git lfs *.svg
   git lfs *.gif
   git lfs *.jpg
   git lfs *.jpeg
   

2. Buat folder yang akan digunakan sebagai lokasi gambar mis. doc. Pada sistem berbasis GNU / Linux dan Unix ini dapat dilakukan melalui:

   cd project_folder
   mkdir doc
   git add doc
   

3. Salin rekatkan semua gambar ke dalam folder dokumen. Setelah itu tambahkan melalui git addperintah.

4. Berkomitmen dan dorong.

5. Gambar tersedia untuk umum di url berikut:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ cabang ^ / ^ image_lokasi di repo ^

Di mana: * ^github_username^adalah nama pengguna di github (Anda dapat menemukannya di halaman profil) * ^repo_name^adalah nama repositori * ^branch^adalah cabang repositori tempat gambar diunggah * ^image_location in the repo^adalah lokasi termasuk folder tempat gambar disimpan.

Anda juga dapat mengunggah gambar terlebih dahulu kemudian mengunjungi lokasi di halaman github proyek Anda dan menavigasi sampai Anda menemukan gambar kemudian tekan download tombol dan kemudian salin-tempel url dari bilah alamat browser.

Lihat ini dari proyek saya sebagai referensi.

Kemudian Anda dapat menggunakan url untuk memasukkannya menggunakan sintaks markdown yang disebutkan di atas:

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

Misalnya: Mari kita anggap kita menggunakan foto ini Kemudian Anda dapat menggunakan sintaks markdown:

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

HANYA BEKERJA INI !!

berhati-hatilah dengan huruf besar nama file Anda di tag dan letakkan file PNG inroot, dan tautkan ke nama file tanpa path:

![Screenshot](screenshot.png)

Saya hanya memperluas atau menambahkan contoh ke jawaban yang sudah diterima.

Setelah Anda meletakkan gambar di repo Github Anda.

Kemudian:

• Buka repo Github yang sesuai di browser Anda.
• Menavigasi ke file gambar target Kemudian buka saja gambar di tab baru.
• Salin url
• Dan akhirnya masukkan url ke pola berikut ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Pada kasus saya itu

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Dimana

• shadmazumder adalah milikku username
• Xcode adalah projectname
• master adalah branch
• InOnePicture.pngadalah image, Pada kasus saya InOnePicture.pngada di direktori root.

Ada 2 cara sederhana untuk melakukannya,

1) gunakan tag HTML img,

2)! [] (Jalur tempat penyimpanan gambar Anda / image-name.png)

jalan yang akan Anda salin dari URL di browser saat Anda membuka gambar itu. mungkin ada masalah terjadi spasi jadi pastikan jika ada spasi b / w dua kata path atau dalam nama gambar add->% 20. sama seperti browser.

Keduanya akan berfungsi, jika Anda ingin lebih memahami Anda dapat memeriksa github saya -> https://github.com/adityarawat29

Jawaban ini juga dapat ditemukan di: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Tampilkan gambar dari repo menggunakan:

domain prepend: https://raw.githubusercontent.com/

tambahkan bendera: ?sanitize=true&raw=true

gunakan <img />tag

• Domain :raw.githubusercontent.com/
• Nama Pengguna :YourUserAccount/
• Repo :YourProject/
• Cabang :YourBranch/
• Path :DirectoryPath/
• Nama file :example.png

Bekerja untuk SVG, PNG, dan JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Contoh kode yang berfungsi ditampilkan di bawah setelah digunakan:

**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 :

Terima kasih: - 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

Saya telah menemukan solusi lain tetapi sangat berbeda dan saya akan menjelaskannya

Pada dasarnya, saya menggunakan tag untuk menunjukkan gambar, tetapi saya ingin pergi ke halaman lain ketika gambar diklik dan di sini adalah bagaimana saya melakukannya.

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

Jika Anda meletakkannya tepat di sebelah satu sama lain, dipisahkan oleh baris baru, saya kira ketika Anda mengklik gambar, itu pergi ke tag yang memiliki href ke situs lain yang ingin Anda redirect.

TERBARU

Wikis dapat menampilkan gambar PNG, JPEG, atau GIF

Sekarang Anda dapat menggunakan:

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

-ATAU-

Ikuti langkah ini:

1. Pada GitHub, navigasikan ke halaman utama repositori.

2. Di bawah nama repositori Anda, klik Wiki.

3. Menggunakan bilah sisi wiki, navigasikan ke halaman yang ingin Anda ubah, dan kemudian klik Edit.

4. Pada bilah alat wiki, klik Gambar .

5. Di kotak dialog "Sisipkan Gambar", ketikkan URL gambar dan teks alt (yang digunakan oleh mesin pencari dan pembaca layar).
6. Klik OK.

Rujuk Dokumen .

Pertimbangkan untuk menggunakan tablejika menambahkan beberapa tangkapan layar dan ingin menyelaraskannya menggunakan data tabular untuk meningkatkan aksesibilitas seperti yang ditunjukkan di sini:

Jika parser penurunan harga Anda mendukungnya, Anda juga bisa menambahkan role="presentation"atribut WIA-ARIA ke elemen TABEL dan menghilangkan thtag.

Proses langkah demi langkah, Pertama-tama buat folder (beri nama folder Anda) dan tambahkan gambar / gambar yang ingin Anda unggah dalam file Readme.md. (Anda juga dapat menambahkan gambar / gambar dalam folder yang ada di proyek Anda.) Sekarang, Klik ikon edit file Readme.md, lalu

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

Setelah menambahkan gambar, Anda dapat melihat pratinjau perubahan di tab, "Pratinjau Perubahan". Anda akan menemukan gambar Anda di sini. misalnya seperti ini, Dalam kasus saya,

![](app/src/main/res/drawable/refrence_image.png)

folder aplikasi -> folder src -> folder utama -> folder res -> folder drawable -> dan di dalam file drawable folder refrence_image.png terletak. Untuk menambahkan beberapa gambar, Anda dapat melakukannya seperti ini,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Catatan 1 - Pastikan nama file gambar Anda tidak mengandung spasi. Jika berisi spasi maka Anda perlu menambahkan% 20 untuk setiap ruang di antara nama file. Lebih baik untuk menghapus spasi.

Catatan 2 - Anda bahkan dapat mengubah ukuran gambar menggunakan tag HTML, atau ada cara lain. Anda dapat google untuk lebih. jika kamu memerlukannya.

Setelah ini, tulis pesan perubahan komit Anda, lalu komit Perubahan Anda.

Ada banyak cara lain untuk melakukannya, membuat masalah dan lain-lain. Sejauh ini, ini adalah metode terbaik yang saya temukan.

Kita bisa melakukan ini dengan sederhana,

• buat Isu Baru di GitHub
• seret dan lepas gambar pada badan divMasalah

setelah beberapa detik, tautan akan dibuat. Sekarang, salin tautan atau URL gambar dan gunakan semua platform yang didukung.

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

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

Ada opsi lain yang belum saya lihat sebutkan. Anda cukup membuat repositori lain di bawah pengguna atau organisasi Anda yang disebut "aset". Dorong gambar Anda ke repo ini dan rujuk dari repo Anda yang lain:

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

Saya telah melakukan ini di salah satu repo saya dan itu cocok untuk saya. Saya dapat versi gambar README saya untuk semua proyek saya terlepas dari kode saya, tetapi masih menyimpannya semua di satu tempat . Tidak ada masalah atau cabang atau artefak yang mudah salah tempat diperlukan.