wake-up-neo.com

Wie füge ich einen Screenshot zu READMEs im Github-Repository hinzu?

Ist es möglich, einen Screenshot in der Datei README in einem GitHub-Repository abzulegen? Wie lautet die Syntax?

538
daisy

Wenn Sie Markdown (README.md) verwenden:

Vorausgesetzt, Sie haben das Bild in Ihrem Repo, können Sie eine relative URL verwenden:

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

Wenn Sie ein Bild einbetten müssen, das an anderer Stelle gehostet wird, können Sie eine vollständige URL verwenden

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub empfiehlt die Verwendung von relativen Links mit dem Parameter ?raw=true, um sicherzustellen, dass die gespaltenen Repos korrekt angezeigt werden.

Der Parameter raw=true ist vorhanden, um sicherzustellen, dass das Bild, mit dem Sie eine Verknüpfung herstellen, unverändert gerendert wird. Das bedeutet, dass nur das Bild verlinkt wird, nicht das gesamte GitHub-Interface für die jeweilige Datei. Siehe dieser Kommentar für weitere Details.

Schauen Sie sich ein Beispiel an: https://raw.github.com/altercation/solarized/master/README.md

Wenn Sie SVGs verwenden, müssen Sie das Sanitize-Attribut ebenfalls auf true setzen: ?raw=true&sanitize=true. (Danke @ EliSherer)

Auch die Dokumentation zu relativen Links in README Dateien: https://help.github.com/articles/relative-links-in-readmes

Und natürlich die Markdown-Dokumentation: http://daringfireball.net/projects/markdown/syntax

Wenn Sie einen neuen Zweig screenshots erstellen, um die Bilder zu speichern, können Sie außerdem verhindern, dass sie sich im Arbeitsbaum master befinden

Sie können sie dann einbetten mit:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")
781
Paul

Auch wenn es bereits eine akzeptierte Antwort gibt, möchte ich eine weitere Möglichkeit zum Hochladen von Bildern in die Readme-Datei auf GitHub hinzufügen.

  • Sie müssen ein Problem in Ihrem Repo erstellen
  • Ziehen Sie Ihr Bild in den Kommentarbereich und legen Sie es dort ab
  • Nachdem der Link für das Bild generiert wurde, fügen Sie ihn in Ihre Readme-Datei ein

Weitere Details finden Sie hier

62
user3941146

Ich fand, dass der Pfad zu dem Bild in meinem Repo nicht ausreichte, ich musste auf das Bild in der Subdomain raw.github.com verlinken.

URL-Format https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Abschriftenbeispiel ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

54
Ryan

Eine Zeile darunter sollte das sein, wonach Sie suchen

wenn sich Ihre Datei im Repository befindet

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

wenn sich Ihre Datei in einer anderen externen URL befindet

![ScreenShot](https://{url})
20
mmcorrelo
  1. Laden Sie Ihr Bild auf postimage.org hoch
  2. Holen Sie sich Github Markdown-URL
  3. Fügen Sie in Ihre ReadMe
18
diju

Die Abschriftensyntax für die Anzeige von Bildern lautet in der Tat:

![image](https://{url})

ABER: Wie wird das url bereitgestellt?

  • Sie möchten Ihr Repo wahrscheinlich nicht mit Screenshots überladen, sie haben nichts mit Code zu tun
  • vielleicht möchten Sie sich auch nicht mit dem Aufwand befassen, Ihr Bild im Web verfügbar zu machen ... (laden Sie es auf einen Server hoch ...).

Also ... Sie können diesen tollen Trick verwenden, um github Host zu Ihrer Bilddatei zu machen. TDLR:

  1. erstellen Sie ein Problem in der Problemliste Ihres Repos
  2. ziehen Sie Ihren Screenshot zu diesem Thema per Drag & Drop
  3. Kopieren Sie den soeben von Github erstellten Markdown-Code , um Ihr Bild anzuzeigen
  4. füge es in deine Readme ein (oder wo immer du willst)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

16
edelans

Viel einfacher als das Hinzufügen einer URL Laden Sie einfach ein Bild in dasselbe Repository hoch, wie zum Beispiel:

![Screenshot](screenshot.png)

6
Taymour Niazi

füge dies zu README hinzu

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>
6
Dan Alboteanu

Methode 1-> Abschriftenweg

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Methode 2-> HTML-Methode

<img src="https://link(format same as above)" width="100" height="100"/>

oder

<img src="https://link" style=" width:100px ; height:100px " />

Hinweis -> Wenn Sie Ihr Bild nicht stylen möchten, dh die Größe ändern, entfernen Sie den Stilteil

4
shaurya uppal

Markdown: ![Screenshot](http://url/to/img.png)

  • Erstellen Sie ein Problem beim Hinzufügen von Bildern
  • Fügen Sie das Bild per Drag & Drop oder per Dateiauswahl hinzu
  • Dann kopiere die Bildquelle

  • Fügen Sie nun ![Screenshot](http://url/to/img.png) zu Ihrer README.md-Datei hinzu

Getan!

Alternativ können Sie eine Image-Hosting-Site wie imgur verwenden und deren URL abrufen und in Ihre README.md-Datei einfügen, oder Sie können auch ein statisches File-Hosting verwenden.

Beispielausgabe

3
abe312

Erstellen Sie zunächst ein Verzeichnis (einen Ordner) im Stammverzeichnis Ihres lokalen Repos, das das screenshots enthält, das Sie hinzufügen möchten. Nennen wir den Namen dieses Verzeichnisses screenshots. Fügen Sie die Bilder (JPEG, PNG, GIF usw.), die Sie hinzufügen möchten, in dieses Verzeichnis ein.

Android Studio Workspace Screenshot

Zweitens müssen Sie zu jedem Bild einen Link in Ihre README-Datei einfügen. Wenn ich Bilder mit den Namen 1_ArtistsActivity.png und 2_AlbumsActivity.png in meinem Screenshot-Verzeichnis habe, füge ich deren Links wie folgt hinzu:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

Wenn Sie möchten, dass jeder Screenshot in einer separaten Zeile angezeigt wird, schreiben Sie die entsprechenden Links in separate Zeilen. Es ist jedoch besser, wenn Sie alle Links in eine durch Leerzeichen getrennte Zeile schreiben. Es sieht vielleicht gar nicht so gut aus, aber GitHub arrangiert sie automatisch für Sie.

Übernehmen Sie schließlich Ihre Änderungen und drücken Sie es!

2
Zizoh

Für mich ist der beste Weg -

  1. Erstellen Sie ein neues Problem mit diesem Repository auf github und laden Sie die Datei im GIF-Format hoch. Um Videodateien in das GIF-Format zu konvertieren, können Sie diese Website verwenden http://www.online-convert.com/
  2. Senden Sie die neu erstellte Ausgabe.
  3. Kopieren Sie die Adresse der hochgeladenen Datei
  4. Endlich in deine README Datei setzen! [Demo] (COPIED ADDRESS)

Hoffe das wird helfen.

0
Asifur Rahman