Frage Fügen Sie Bilder zu README.md auf GitHub hinzu


Kürzlich bin ich beigetreten GitHub. Ich habe dort einige Projekte gehostet.

Ich muss einige Bilder in meine README-Datei einfügen. Ich weiß nicht, wie ich das machen soll.

Ich habe danach gesucht, aber ich habe nur einige Links erhalten, die mir sagen, dass ich "Bilder im Web hosten und den Bildpfad in der Datei README.md angeben soll".

Gibt es eine Möglichkeit, dies zu tun, ohne die Bilder auf Webhosting-Services von Drittanbietern zu hosten?


1069
2018-01-24 05:44


Ursprung


Antworten:


Probieren Sie diese Abschrift aus:

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

Ich denke, Sie können direkt mit der Rohfassung eines Bildes verlinken, wenn es in Ihrem Repository gespeichert ist. d.h.

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

Bearbeiten: habe gerade bemerkt, dass der Kommentar zum Artikel verlinkt, der die Verwendung von gh-Seiten vorschlägt. Außerdem können relative Links eine bessere Idee sein als die absoluten URLs, die ich oben gepostet habe.


1132
2018-01-24 05:46



Sie können auch relative Pfade wie verwenden

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

182
2017-10-08 03:18



  • Sie können ein neues Problem erstellen
  • Bilder hochladen (drag & drop)
  • Kopieren Sie die Bild-URL und kopieren Sie die Bild-URL in Ihre README.md-Datei.

hier ist ein ausführliches youTube Video das im Detail erklärt:

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


116
2017-10-28 06:03



Es ist viel einfacher als das.

Laden Sie einfach Ihr Image in den Repository-Root hoch und verknüpfen Sie es wie folgt mit dem Dateinamen ohne Pfad:

![Screenshot](screenshot.png)

58
2017-07-08 20:07



Sie können auch Bilder mit einfachen hinzufügen HTML-Tags:

<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



Viele der veröffentlichten Lösungen sind unvollständig oder nicht nach meinem Geschmack.

  • Ein externes CDN wie imgur fügt der Kette ein weiteres Werkzeug hinzu. Meh.
  • Das Erstellen eines Dummy-Problems im Issue Tracker ist ein Hack. Es erzeugt Unordnung und verwirrt Benutzer. Es ist ein Schmerz, diese Lösung auf eine Gabel oder auf GitHub zu migrieren.
  • Durch den Zweig gh-pages werden die URLs spröde. Eine andere Person, die an dem Projekt arbeitet, das die gh-Seite verwaltet, weiß möglicherweise nichts, was von dem Pfad zu diesen Bildern abhängt. Der gh-pages-Zweig weist ein bestimmtes Verhalten auf GitHub auf, das zum Hosten von CDN-Bildern nicht erforderlich ist.
  • Verfolgen von Assets in der Versionskontrolle ist eine gute Sache. Wenn ein Projekt wächst und verändert, ist es eine nachhaltigere Möglichkeit, Änderungen durch mehrere Benutzer zu verwalten und zu verfolgen.
  • Wenn ein Bild auf eine bestimmte Version der Software angewendet wird, ist es möglicherweise vorzuziehen, ein unveränderliches Bild zu verknüpfen. Wenn das Bild später aktualisiert wird, um Änderungen an der Software widerzuspiegeln, wird jeder, der die Readme dieser Revision liest, das richtige Bild finden.

Meine bevorzugte Lösung, inspiriert von dieser Kernpunkt, ist ein zu verwenden Vermögenszweig mit Permalinks zu bestimmten Revisionen.

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.

Konstruiere einen "Permalink" für diese Version des Bildes und hänge es in Markdown:

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

z.B.

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

Verwenden Sie immer, um das neueste Bild im Zweig Assets anzuzeigen assets anstelle des Sha:

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


20
2018-03-08 17:13



Verpflichten dein Bild (image.png) in einem Ordner (Mein Ordner) und füge folgende Zeile hinzu: README.md:

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


13
2018-06-14 10:01