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

594

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

Gänseblümchen
quelle
1
Die richtige Lösung hierfür ist die Verwendung relativer Referenzen gemäß dieser Antwort stackoverflow.com/a/11916467/1633251 (siehe den Kommentar mit dem Link zu einem neuen Github-Dokument, wie dies zu tun ist). Die kurze Antwort ist zu verwenden[Read more words!](docs/more_words.md)
David H
2
Die meisten Lösungen schlagen vor, auf das Repo selbst zu verweisen. Was ist, wenn Sie Binärdateien im Repo vermeiden möchten (wie vorgeschlagen auch in einem separaten Zweig) und diese an einem externen Ort speichern möchten? Irgendwelche guten Praktiken? Ein Kern vielleicht (IDK, wenn der Kern binär oder nur Text sein kann)? ein weiteres Repo "myproject-assets" für das Projekt "myproject" erstellen? Gibt es einen externen beliebten Bildort, der dem De-facto-Standard von YouTube zum Hochladen von Videos ähnelt?
Xavi Montero
1
Mögliches Duplikat von Bilder zu README.md auf GitHub
hinzufügen

Antworten:

851

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, relative Links mit dem ?raw=trueParameter zu verwenden, um sicherzustellen, dass gegabelte Repos korrekt angezeigt werden.

Der raw=trueParameter ist vorhanden, um sicherzustellen, dass das Bild, auf das Sie verlinken, unverändert gerendert wird. Das bedeutet, dass nur das Bild verlinkt wird, nicht die gesamte GitHub-Oberfläche für die jeweilige Datei. Weitere Informationen finden Sie in diesem Kommentar .

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

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

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

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

Wenn Sie einen neuen Zweig screenshotszum Speichern der Bilder erstellen, können Sie außerdem vermeiden, dass diese im masterArbeitsbaum enthalten sind

Sie können sie dann einbetten mit:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")
Paul
quelle
1
Nun, ich habe die offiziellen Dokumente zu relativen Links hinzugefügt, aber ich kann kein Repo finden, das sie verwendet. Wenn Sie Vorschläge haben, helfe ich Ihnen gerne weiter, da der springende Punkt darin besteht, mehr Menschen zu helfen und nicht im Rahmen zu bleiben (mein Fehler hier).
Paul
2
@ Paul, hier ist ein Beispiel-Repository, das genau das tut! github.com/Tarrasch/zsh-bd
Tarrasch
4
github.com/altercation/solarized ist die gerenderte Version des obigen Beispiels, falls dies jemandem hilft.
Barrycarter
3
Wenn Sie sagen /relative/path/to/img.jpg, ist das nicht ein absoluter Weg aufgrund des führenden Schrägstrichs?
JWW
1
@kelvin, der raw=trueParameter ist vorhanden, um das Bild zu rendern, auf das der GitHub-Pfad zeigt, nicht die GitHub-Schnittstelle. Versuchen Sie, den Unterschied zu erkennen: github.com/altercation/solarized/blob/master/img/… vs github.com/altercation/solarized/blob/master/img/… . Die erste URL zeigt Ihnen die GitHub-Oberfläche und das Bild, während die zweite nur das Bild zeigt. Die relativen Links sind immer noch nützlich, wenn Sie Repos klonen / forken. Ja, Sie sollten also relative Pfade mit diesem Parameter verwenden, aber es handelt sich um zwei verschiedene Konzepte.
Paul
70

Obwohl 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 erstellt wurde, fügen Sie ihn in Ihre Readme-Datei ein

Weitere Details finden Sie hier


quelle
6
Ich bin interessiert, wie lange Bilder, die auf diese Weise geladen werden, leben werden. Führt Github einige Bildbereinigungen durch? Wie "Wenn dieses Bild nicht von einem Github-Problem referenziert wird, kann ich es sicher entfernen" ...
Artin
1
@Artin wahrscheinlich nur, wenn das Problem vollständig gelöscht ist. Geschlossene Probleme bleiben für immer bestehen, da sie eine sehr wichtige Rolle bei der Dokumentation und beim Debuggen spielen
andrhamm,
55

Ich stellte fest, dass der Pfad zum Bild in meinem Repo nicht ausreichte. Ich musste auf das Bild in der raw.github.comSubdomain verlinken .

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

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

Ryan
quelle
4
Dies wurde aufgrund des Kommentars von @sorens zur akzeptierten Antwort abgelehnt. Es ist schlecht, ein absolutes Bad anzugeben, da es bei gegabelten Repositories nicht gut funktioniert. (Oder wenn Sie Ihr Repo umbenennen oder wenn Github den Domainnamen usw. usw. ändert)
Linus Unnebäck
7
@ LinusUnnebäck: Es gibt einen guten Grund, absolute Pfade imho zu verwenden: Wenn die readme.md auch an anderen Stellen verwendet wird, zum Beispiel als Doxygen-Hauptseite. Relative Links funktionieren dann nicht.
Ela782
1
@ Ela782 obwohl, auf einem weiteren Vermerk, dass sollte kein Problem für Software, die Readme - Dateien zerreißt speziell von GitHub ; Eine solche Software sollte wissen, wie man relative URLs richtig auflöst. npm zum Beispiel.
Mark Amery
Wie verlinke raw.github.comich das Bild in der Subdomain? Wo kann ich die Bilddatei hochladen?
Saif
@Saif raw.github.com ist nur ein Spiegelbild dessen, was in Ihrem Github-Repository gespeichert ist. Übertragen Sie das Bild einfach in Ihr Repository und folgen Sie dem angegebenen URL-Format.
24
  1. Laden Sie Ihr Bild auf postimage.org hoch
  2. Holen Sie sich Github Markdown URL
  3. Fügen Sie in Ihre ReadMe ein
Diju
quelle
2
Diese URL sollte als postimages.org
Indrajith Ekanayake
Sie sind der einzige, dessen Antwort mir nützlich war
Cypher
21

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})
mmcorrelo
quelle
2
Schlagen Sie
shaobin0604
2
-1 aus dem von @ shaobin0604 angegebenen Grund; In den offiziellen Dokumenten wird empfohlen, beim Verknüpfen mit einer Datei in Ihrem eigenen Repo relative Links zu verwenden, damit der Link beim Verzweigen auf die richtige Stelle verweist.
Mark Amery
17

Die Markdown-Syntax für die Anzeige von Bildern lautet in der Tat:

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

ABER: Wie soll man das bereitstellen url?

  • 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 fantastischen Trick verwenden , um Github dazu zu bringen, Ihre Bilddatei zu hosten. TDLR:

  1. Erstellen Sie ein Problem in der Problemliste Ihres Repos
  2. Ziehen Sie Ihren Screenshot zu diesem Problem per Drag & Drop
  3. Kopieren Sie den Markdown-Code, den Github gerade erstellt hat, damit Sie Ihr Bild anzeigen können
  4. Fügen Sie es in Ihre Readme-Datei ein (oder wo immer Sie möchten).

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

edelans
quelle
7

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

![Screenshot](screenshot.png)

Taymour Niazi
quelle
7

füge dies zu README hinzu

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

Abschlag: ![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
  • Kopieren Sie dann die Bildquelle

  • Nun fügen Sie ![Screenshot](http://url/to/img.png)zu Ihrer README.md Datei

Erledigt!

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

Beispielproblem

abe312
quelle
Ich habe das vor langer Zeit gemacht, jetzt sind keine Bilder mehr verfügbar. Ich empfehle das also nicht.
Namek
Sie könnten in diesem Fall immer imgur oder eine benutzerdefinierte Bild-
CDN verwenden
4

Methode 1-> Abschriftenweg

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

Methode 2-> HTML-Weg

<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 formatieren möchten, dh die Größe ändern möchten, entfernen Sie den Stilteil

Shaurya Uppal
quelle
1

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

Screenshot des Android Studio-Arbeitsbereichs

Zweitens müssen Sie jedem Bild in Ihrer README einen Link hinzufügen. Wenn ich also Bilder mit Namen 1_ArtistsActivity.pngund 2_AlbumsActivity.pngin 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 jeden Screenshot in einer separaten Zeile haben möchten, schreiben Sie die Links in separate Zeilen. Es ist jedoch besser, wenn Sie alle Links in einer Zeile schreiben, die nur durch Leerzeichen getrennt ist. Es sieht vielleicht gar nicht so gut aus, aber GitHub arrangiert sie automatisch für Sie.

Schließlich übernehmen Sie Ihre Änderungen und pushen Sie es!

Zizoh
quelle
1

Ich habe ein paar ähnliche Fragen gegoogelt und keine Antworten auf mein Problem und seine recht einfache Lösung gefunden.

Google Cloud Storage - ein etwas anderer Ansatz für Bilder in READMEs

Hier ist es: Wie beim OP wollte ich ein Bild in meiner Github-README-Datei haben und habe es in Kenntnis der Markdown-Syntax eingegeben:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

Sie müssen die obigen obigen Ersetzungen (z. B. MY_IMAGE = image.jpg) durchführen, damit dies funktioniert.

Aber warten Sie ... Fehler - es gibt kein tatsächlich gerendertes Foto! Und der Link entspricht genau dem von Google Storage!

Screenshot des fehlgeschlagenen Github-Bild-Uploads

Github camo- Anonyme Bilder

Github hostet Ihre Bilder anonym , yay! Dies stellt jedoch ein Problem für Google-Speicherressourcen dar. Sie müssen die generierte URL von Ihrer Google Cloud Console abrufen.

Ich bin mir sicher, dass es einen reibungsloseren Weg gibt. Besuchen Sie einfach Ihren angegebenen URL-Endpunkt und kopieren Sie die lange URL. Einzelheiten:

Anleitung

  1. Besuchen Sie Ihre Speicherkonsole: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
  2. Klicken Sie auf das Bild, das Sie in Github anzeigen möchten (dadurch wird die Seite "Objektdetails" angezeigt).
  3. Kopieren Sie Pasta dieser URL (die mit httpsnot beginnt gs) in eine neue Browser-Registerkarte / ein neues Browser-Fenster
  4. Kopieren Sie die neu generierte URL - sie sollte länger sein - von Ihrem neuen Browser-Tab / Fenster in Ihre Github README-Datei

Hoffentlich hilft dies, dieses Problem für andere zu beschleunigen und zu klären.

Jason R Stevens CFA
quelle
Zu Ihrer Information: Es scheint, dass sich auf der Google- oder Github-Seite etwas ändert. Ich hatte einige Bilder in READMEs, die mit dieser Methode fehlgeschlagen sind, und einige, die am Nachmittag des 28. März 2020 arbeiteten. YMMV hier!
Jason R Stevens CFA
0

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 das neu erstellte Problem.
  3. Kopieren Sie die Adresse der hochgeladenen Datei
  4. Zum Schluss in deine README-Datei setzen! [Demo] (KOPIERTE ADRESSE)

Hoffe das wird helfen.

Asifur Rahman
quelle
Wie unterscheidet es sich von stackoverflow.com/a/32252663/1570104 ?
edelans
0

Fügen Sie ein Bild im Repository aus der Option zum Hochladen der Datei und dann in der README-Datei hinzu

![Alt text]("enter image url of repositoryhere") 
Marium Jawed
quelle
-5

Mit den Bildern im /screen-shotsVerzeichnis. Das Äußere <div>ermöglicht die Positionierung der Bilder. Die Polsterung erfolgt mit <img width="desired-padding" height="0">.

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>
Mick Cullen
quelle
1
Für mein Leben konnte ich nicht herausfinden, ob ich ein Bild in der README-Datei zentrieren sollte - was Ihre Antwort enthält, also danke!
Cody Reichert
Ich fand diese Antwort hilfreich, da Sie damit die Abmessungen des Bildes festlegen können
Stanley