Tambahkan gambar ke README.md di GitHub


1844

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?



5
Gandakan stackoverflow.com/questions/10189356/… yang diposting pada tahun 2012.
leetNightshade

86
Bukan di luar topik, GitHub adalah alat programmer.
Lance Roberts

Jawaban:


1887

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)

138
Anda juga harus mempertimbangkan untuk menggunakan tautan relatif
mgalgs

53
Tautan relatif bukan penggunaan yang bagus di sini, bayangkan readme Anda juga ditampilkan pada npm yang tidak meng-host gambar dengan cara ini - perlu tautan ke GitHub. SRC gambar harus berada di domain github.com , bukan subdomain raw.github.com dan bukan domain raw.githubusercontent.com .
Lee Crossley

4
Saya benar-benar berakhir dengan jalur relatif (yang bagi saya hanyalah nama file gambar karena saya memiliki semuanya di root). Saya telah menyimpan 2 salinan README.md, satu untuk instalasi lokal di / usr / share / projectname / docs, dan satu untuk github. Sekarang, saya bisa menggunakan README.md yang sama untuk keduanya karena nama file gambar berfungsi dengan baik dalam kedua kasus. Jika saya ingin memposting salinan bagian README saya di tempat lain, saya harus meng-host gambar di tempat lain atau memasukkan url raw.github.com.
Colin Keenan

15
GitHub sendiri merekomendasikan jalur relatif: help.github.com/articles/relative-links-in-readmes. Satu kelemahan utama dari jalur absolut adalah bahwa, jika gambar dipindahkan secara master, cabang lain yang masih mengarah ke URL lama akan rusak.
Jack O'Connor

3
Domain yang disarankan saat ini tampaknya tidak berfungsi dan tautannya harus seperti ini:https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true
Slavik Shynkarenko

426

Anda juga dapat menggunakan jalur relatif seperti

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

16
Iya. Sejauh ini, ini adalah cara termudah kecuali Anda mengkhawatirkan kinerja. Saya perhatikan bahwa ini relatif terhadap direktori, bukan repo , jadi jika Anda memiliki 'myimage.png' dalam direktori yang sama dengan 'about_pics.md', maka markupnya adalah:![What is this](myimage.png)
Rich

5
Ini adalah solusi yang luar biasa karena 1) berfungsi 2) gambar juga ditampilkan di penampil lokal, tanpa perlu akses internet
Régis B.

2
@Rich dapatkah Anda memperluas komentar Anda mengenai kinerja. Apa masalah kinerja yang ada dengan pendekatan jalur relatif?
Lea Hayes

2
Jalur ini relatif terhadap apa?
Dims

2
Seperti yang ditunjukkan oleh Lee Crossley, Anda harus menghindari tautan relatif karena tautan itu terputus ketika readme Anda ditampilkan pada npm. Sebagai gantinya, tautkan ke image src pada domain github.com dengan tanda "? Sanitize = true" jika format gambarnya mirip dengan SVG. Lihat lebih detail di jawaban SO ini: stackoverflow.com/a/16462143/6798201
AlienKevin

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


24
Sejauh yang saya mengerti Anda tidak benar-benar perlu menyelamatkan masalah ini. Dengan cara ini Anda tidak benar-benar membutuhkan tiket tiruan itu di Pelacak Isu. Pertanyaannya adalah apakah ini merupakan metode "aman", artinya jika GitHub akan mendeteksi (setelah beberapa waktu) bahwa gambar tersebut menjadi yatim dan karenanya menghapusnya dari CDN GitHub ??
peterh

3
Jawaban ini sangat cocok untuk saya dan tidak perlu menyimpan masalah baru dalam repo. Saya telah menemukan video di Youtube yang menjelaskan secara rinci: youtube.com/watch?v=nvPOUdz5PL4 .
Francislainy Campos

1
Jawaban ini berhasil, dan membutuhkan sedikit usaha. Masalahnya dapat dibuang, tetapi URL untuk gambar tersebut tetap ada. URL gambar dalam bentuk: user-images.githubusercontent.com ...
Sabuncu

6
Ini trik yang bagus! Tapi apakah ada yang tahu jawaban untuk pertanyaan @ peterh? Akankah GitHub secara berkala membersihkan gambar yang menjadi yatim (yaitu tidak memiliki masalah yang menyertainya)?
Johnny Oshika

1
@JohnnyOshika Saya ragu ada orang di luar github yang bisa menjawabnya. Mungkin tergantung pada apa "user-images.githubusercontent.com" digunakan untuk. Jika hanya untuk gambar yang diunggah ke komentar, maka masuk akal jika mereka dapat memindai relasi data yang hilang dan menghapus gambar. Jika lebih umum, mungkin sulit untuk menentukan dengan pasti bahwa tidak ada referensi ke file, membuatnya menjadi mahal secara komputasi atau menantang untuk menentukan bahwa itu dapat dihapus tanpa masalah.
yourbuddypal

127

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)

10
Tidak, saya tidak berpikir menambahkan tangkapan layar ke repo git adalah praktik yang baik. Terutama bukan pada akarnya. Jawaban Ahmad Ajmi jauh lebih baik
Arnaud P

26
Tidak pada dasarnya tetapi Anda dapat dengan mudah beradaptasi ini docs/imagesatau apa pun, screenshot png kecil ok IMHO
Christophe Roussy

5
Ini harus menjadi solusi yang diterima, esp. dengan saran Christophe untuk meletakkan gambar di bawah doc / tree /
Mike Ellis

sempurna..!! jika png ada di folder lain. Cukup, tambahkan path "folderName / tangkapan
layar.png

Saya menemukan jawaban Anda berguna untuk kasus saya: Saya menggunakan Gitlab dan saya menggunakan logo.pnggambar di bagian dasar repo untuk mengatur avatar ke repo. Saya ingin memasukkan foto ini ke README.md.
avi.elkharrat

84

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>

1
Saat Anda menggunakan tag HTML di dalam file penurunan harga Anda. Ini akan diabaikan oleh Pandoc , konverter dokumen universal.
Lorem Ipsum Dolor

1
Ini yang terbaik sehingga dapat dipusatkan atau diletakkan di satu sisi (untuk gambar yang lebih kecil, setidaknya.)
Alexis Wilke

Bagaimana Anda menentukan jalur relatif? Ini tidak relatif untuk README.md (dalam semua kasus?).
friederbluemle

55

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 )


2
Ini adalah pelengkap yang baik untuk jawaban yang diterima. Aset dilacak, gambar tidak di master, tidak ada kekacauan. Berhati-hatilah dengan git reset --hard; pastikan perubahan dilakukan.
dojuba

Di alam liar di mesin Anda. Anda bisa mengarahkan ke mana pun file kebetulan ( ~/Downloads, /tmp, dll).
paulmelnikow

Aku bersumpah aku ingat ada direktori yang bisa kamu buat yang tidak muncul di Github. Sampai saya dapat melacaknya, posting ini sepertinya adalah hal terbaik berikutnya untuk digunakan. Terima kasih!
Shadoninja

21

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

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


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


Ini adalah cara termudah untuk menambahkannya menurut saya. Cukup seret ke dalam kotak, salin alamat dan tempelkan ke readme Anda dengan teks di bawah ini. Boom, kamu sudah selesai.
Joe Hill

15

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

masukkan deskripsi gambar di sini


2
Suka alat ini!
Dan

1
Saya juga suka alat ini, ini harus menjadi fitur default Git !!
shridutt kothari

14

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


13

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:

stack overflow image oleh alamin


10

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

masukkan deskripsi gambar di sini


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

masukkan deskripsi gambar di sini

dibantu oleh: adam-p


5
Penggunaan tabel tidak relevan dengan topik pertanyaan OP.
mhucka

1
menambahkan tangkapan layar suatu aplikasi dapat dilakukan dengan cara ini, terima kasih
UpaJah

Gunakan CSS dan bukan Tabel, itu akan mengguncang dunia Anda.
jeffmcneill

9

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)


1
Sempurna dan segar.
Biswajit Das

1
itu bekerja, Sebenarnya, saya pikir jawaban ini harus diterima
Luk Aron

8

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

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

8

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

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

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

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


7

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.



masukkan deskripsi gambar di sini

masukkan deskripsi gambar di sini


6

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 %

5

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.


5

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)

5

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)

5

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. Membuka gambar di tab baru
  • Salin url Salin url dari tab browser
  • 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.

1
Ini adalah satu-satunya yang bekerja dengan sempurna untuk saya. Tidak ada kebingungan tentang jalur, apakah "master" merujuk ke direktori atau cabang, di mana root mulai, dll. Hanya peringatan adalah Firefox (72) tidak memungkinkan Anda untuk membuka gambar di tab terpisah sehingga ini hanya Chrome untuk saat ini saya berpikir.
Thomas Browne

5

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


Ini berhasil bagi saya. Memiliki gambar dalam "aplikasi" folder di bawah README.md yang saya gunakan:![](images/ss_apps.png)
cdsaenz

1
Saya terkejut bahwa hanya Aditya yang menyebutkan bahwa spasi adalah masalah, dan dengan cara yang agak bodoh juga - tidak ada kesalahan, tetapi sintaks Anda hanya ditampilkan seolah-olah tidak ada fitur seperti itu. Suara positif dari saya karena menyebutkan ini.
Tammi

5

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

URL yang cukup berfungsi untuk svg, png, dan jpg menggunakan:
  • 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


Itu tidak berfungsi untuk saya sampai saya menghapus string kueri.
mhenry1384

1
Setidaknya untuk .png dan raw.githubusercontent.com sanitize = true tidak berfungsi dan harus dihapus. raw = true berfungsi dengan baik. github.com/sphinxy/AppDynamics.Playground/blob/master/README.md
Danila Polevshikov

1
rawgit.com ditutup pada 2018 dan tidak boleh digunakan lagi; Anda harus menghapusnya dari jawaban ini. raw.githubusercontent.com , yang juga Anda sebutkan, adalah alternatif terdekat.
Rory O'Kane

4

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.


2

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 .


2

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

teh tinggi

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


2

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.


1

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.


Solusi Anda berhasil! Ini mudah. Terima kasih
Jeanne vie

1

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

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

1

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.

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.