Menambahkan gambar ke README.md di GitHub

Baru-baru ini saya bergabung dengan GitHub. Aku host beberapa proyek di sana.

Saya harus menyertakan beberapa gambar dalam File README. Saya don't tahu bagaimana untuk melakukan itu.

Aku mencari tentang ini, tapi semua aku punya adalah beberapa link yang memberitahu saya untuk "tuan rumah gambar di web dan menentukan path gambar di README.md file".

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

Mengomentari pertanyaan (5)
Larutan

Coba ini penurunan harga:

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

Saya pikir anda dapat link secara langsung untuk baku versi gambar jika itu's disimpan dalam repositori anda. yaitu

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

Edit: hanya melihat komentar menghubungkan ke artikel yang menyarankan menggunakan gh-halaman. Juga, link relatif dapat menjadi ide yang lebih baik dari absolute Url yang saya posting di atas.

Komentar (19)

Anda juga dapat menggunakan path relatif seperti

![Alt text](relative/path/to/img.jpg?raw=true "Title")
Komentar (13)
  • Anda dapat membuat Masalah Baru
  • tanggal(drag & drop) gambar itu
  • Copy gambar URL dan paste ke README.md file.

berikut adalah detil video youTube menjelaskan hal ini secara detail:

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

Komentar (10)

It's jauh lebih sederhana dari itu.

Hanya meng-upload gambar anda ke repositori akar, dan link ke file tanpa jalan, seperti:

![Screenshot](screenshot.png)
Komentar (6)

Anda juga dapat menambahkan gambar dengan sederhana tag HTML:

<p align="center">

  ![accessibility text](your_relative_path_here_number_2_large_name)
</p>
Komentar (3)

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

  • Eksternal CDN seperti imgur menambahkan alat lain untuk rantai. Meh.
  • Membuat dummy masalah dalam masalah tracker hack. Itu menciptakan kekacauan dan membingungkan pengguna. It's sakit untuk bermigrasi solusi ini untuk garpu, atau dari GitHub.
  • Menggunakan gh-halaman cabang membuat Url yang rapuh. Orang lain yang bekerja pada proyek pemeliharaan gh-halaman mungkin tidak tahu sesuatu yang eksternal tergantung pada path ke gambar-gambar ini. Gh-halaman branch memiliki perilaku tertentu di GitHub yang tidak diperlukan untuk hosting CDN gambar.
  • Pelacakan aset dalam kontrol versi adalah hal yang baik. Sebagai sebuah proyek tumbuh dan perubahan itu's cara yang lebih berkelanjutan untuk mengelola dan melacak perubahan oleh beberapa pengguna.
  • Jika gambar yang berlaku untuk revisi tertentu dari perangkat lunak, mungkin lebih baik ke link yang abadi dan gambar. Dengan cara itu, jika gambar ini kemudian diperbarui untuk mencerminkan perubahan perangkat lunak, siapa pun yang membaca bahwa revisi's readme akan menemukan gambar yang benar.

Pilihan saya solusi, terinspirasi oleh ini gist, adalah dengan menggunakan aset cabang dengan permalinks 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 needed below.

Membangun "permalink" ini revisi dari gambar, dan membungkusnya dalam Penurunan harga:

![Kucing](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 yang ada pada aktiva cabang, gunakan aset di tempat sha:

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

Komentar (2)

Melakukan gambar anda (gambar.png) dalam sebuah folder (myFolder) dan tambahkan baris berikut di README.md:

![Opsional Teks](../master/myFolder/gambar.png)

Komentar (0)
  • Membuat masalah mengenai menambahkan gambar

  • Tambahkan gambar dengan drag dan drop atau dengan file chooser

  • Kemudian copy sumber gambar

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

Selesai!

Atau anda dapat menggunakan beberapa image hosting situs seperti imgur dan mendapatkan itu's url dan tambahkan di README.md file atau anda bisa menggunakan beberapa file statis hosting juga.

Contoh masalah

Komentar (2)

Hanya menambahkan <img> tag untuk anda README.md dengan relatif src untuk repositori anda. Jika anda're tidak menggunakan relatif src, pastikan server mendukung CORS.

Ia bekerja karena GitHub dukungan inline-html

![My cool logo](/docs/logo.png)
# My cool project and above is the logo of it

Mengamati di sini

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

Berikut ini:

  1. saya-gambar-alt-tag : teks yang akan ditampilkan jika gambar tidak ditampilkan.
  2. url-untuk-gambar : apa yang anda gambar sumber daya. URI gambar

Contoh:

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

Ini akan terlihat seperti berikut:

Komentar (0)

saya perlu menyertakan beberapa gambar dalam File README. Saya don't tahu bagaimana untuk lakukan itu.

Saya membuat sebuah penyihir kecil yang memungkinkan anda untuk membuat dan menyesuaikan sederhana galeri gambar untuk repositori GitHub's readme: Lihat ReadmeGalleryCreatorForGitHub.

Wizard mengambil keuntungan dari fakta bahwa GitHub memungkinkan tag img untuk terjadi README.md. Juga, wizard membuat penggunaan populer trik meng-upload gambar ke GitHub dengan drag'n'menjatuhkan mereka dalam masalah daerah (seperti yang sudah disebutkan di salah satu dari jawaban di thread ini).

Komentar (1)

Gunakan tabel untuk berdiri keluar, hal ini akan memberikan pesona tersendiri untuk itu

Tabel Sintaks:

Terpisah masing-masing kolom sel dengan simbol |

dan header tabel (baris Pertama) dengan 2 baris dengan ---


| col 1      | col 2      |

|------------|-------------|

| gambar 1 | gambar 2 |

output


Sekarang hanya menempatkan <img src="url/relativePath"> pada gambar 1 dan gambar 2 jika anda menggunakan dua gambar


Catatan: jika menggunakan beberapa gambar hanya mencakup lebih kolom, anda dapat menggunakan lebar dan tinggi atribut 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

Gambar Output

dibantu oleh : adam-p

Komentar (2)

Anda dapat link ke gambar dalam proyek anda dari README.md (atau eksternal) dengan menggunakan alternatif github link CDN.

URL akan terlihat seperti ini:

https://cdn.rawgit.com////<path>//<File>

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

Proyek link

Berikut ini adalah proyek yang link ke file (tidak membuat seperti gambar):

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

Contoh gambar tertanam:

Baku link

Berikut ini adalah BAKU link ke file (masih tidak membuat seperti gambar):

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

Contoh gambar tertanam:

CDN link

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

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

Contoh gambar tertanam:

Ini adalah bagaimana saya dapat menggunakan gambar dari proyek saya di kedua saya README.md file, dan di PyPi proyek reStructredText doucmentation ([di sini](https://pypi.python.org/pypi?name=anybadge&versi=1.2.0rc4& action=display))

Komentar (0)

Dalam kasus saya saya menggunakan imgur dan gunakan link langsung cara ini.

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

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

Pada awalnya,anda harus meng-upload file gambar ke github kode perpustakaan ! Kemudian referensi langsung ke alamat dari file gambar .



Komentar (0)

Biasanya saya meng-host gambar di situs ini anda dapat link ke setiap host gambar. Hanya melemparkan ini di readme. Bekerja untuk .rst file, tidak yakin tentang .md

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

Anda hanya dapat melakukan:

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

Maka anda hanya dapat referensi itu di README file seperti:

![diagram](diagram.png)

Komentar (2)

Dalam kasus anda perlu untuk meng-upload beberapa gambar untuk dokumentasi, pendekatan yang baik adalah dengan menggunakan git-lfs. Yakin bahwa anda telah menginstal git-lfs ikuti langkah-langkah berikut:

  1. Intialize git lfs untuk masing-masing jenis gambar:

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

  1. Buat folder yang akan digunakan sebagai lokasi citra misalnya. doc. Pada GNU/Linux dan Unix berbasis sistem ini dapat dilakukan melalui:

cd project_folder mkdir doc git add doc

  1. Copy paste gambar ke folder doc. Setelah itu tambahkan mereka melalui git add perintah.

  2. Commit dan push.

  3. Gambar yang tersedia secara publik di url berikut:

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

Dimana:

  • ^github_username^ adalah username di github (anda dapat menemukannya di halaman profil)
  • ^repo_name^ adalah nama repositori
  • ^cabang^ adalah repositori cabang di mana gambar upload
  • ^image_location di repo^ adalah lokasi termasuk folder tempat gambar disimpan.

Anda juga dapat meng-upload gambar terlebih dahulu kemudian mengunjungi lokasi dalam proyek-proyek github page dan menavigasi melalui sampai anda menemukan gambar kemudian tekan tombol download dan kemudian copy-paste url dari browser's address bar.

Lihat ini dari proyek saya sebagai referensi.

Kemudian anda dapat menggunakan url untuk memasukkan mereka menggunakan markdown syntax yang disebutkan di atas:

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

Misalnya: Mari kita misalkan kita menggunakan ini photo Maka anda dapat menggunakan markdown syntax:

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

Dalam kasus saya saya ingin menunjukkan print screen pada Github tapi juga NPM. Meskipun menggunakan path relatif masih bekerja dalam Github, itu bukan't bekerja di luar itu. Pada dasarnya, bahkan jika saya mendorong saya untuk proyek NPM juga (yang hanya menggunakan yang sama readme.md, gambar itu tidak pernah menunjukkan.

Saya mencoba beberapa cara, pada akhirnya ini adalah apa yang bekerja untuk saya:

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

Sekarang saya melihat gambar saya dengan benar pada NPM atau di mana pun yang saya bisa menerbitkan paket saya.

Komentar (0)

HANYA INI BEKERJA!!

mengambil peduli tentang anda nama file besar di tag dan menempatkan file PNG inroot, dan link ke file tanpa path:

![Screenshot](screenshot.png)
Komentar (0)