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

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

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

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)

1. Laden Sie Ihr Bild auf postimage.org hoch
2. Holen Sie sich Github Markdown URL
3. Fügen Sie in Ihre ReadMe ein

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

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/

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

![Screenshot](screenshot.png)

füge dies zu README hinzu

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

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

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

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!

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!

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.

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.

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

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>