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

Question

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

Answer 1

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

• Erstellen Sie ein Problem beim Hinzufügen von Bildern

• Fügen Sie das Bild durch Ziehen und Ablegen oder über die Dateiauswahl hinzu

• Dann Bildquelle kopieren

• Jetzt hinzufügen ![Screenshot](http://url/to/img.png) zu Ihrer README.md-Datei

Erledigt!

Alternativ können Sie auch eine Bildhosting-Website wie imgur und fügen Sie die URL in Ihre README.md-Datei ein. Sie können auch ein statisches Dateihosting verwenden.

Beispielhafte Ausgabe

Answer 2

Hinzufügen ![ScreenShot](screenshot.png) in der Readme-Datei, wie bereits von vielen erwähnt. Ersetzen Sie screenshot.png durch den Namen des Bildes, das Sie in Ihr Repository hochgeladen haben.

Aber hier ist ein Tipp für Anfänger, wenn Sie das Bild hochladen (da ich diesen Fehler selbst gemacht habe):

Stellen Sie sicher, dass Ihr Bildname keine Leerzeichen enthält. Mein Originalbild wurde als "Screenshot Tag Monat Jahr id.png" gespeichert. Wenn Sie den Namen nicht in etwas wie "contentofimage.png" ändern, wird das Bild nicht in Ihrer Readme-Datei erscheinen.

Answer 3

Für mich hat sich der relative Pfad sehr gut bewährt.

Wie ich das gemacht habe: In meiner aktuellen md-Datei, in der ich ein Bild aus einem anderen Verzeichnis verwenden wollte, habe ich einen relativen Pfad wie diesen verwendet - beachten Sie die folgenden Punkte.

md file loc: base dir -> _post -> current_file.md

& Bilddatei loc, die ich verwenden wollte: base dir -> _asset -> picture_to_use.jpeg

Die Erklärung, die ich verwendet habe, lautete current_file.md Datei:

![your-pic-caption-name](../_asset/picture_to_use.jpeg)

Hinweis - vorher habe ich direkte _asset aber im Idealfall geht es so aus ../_asset/and-so-no

Hinweis - https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-readmes

Answer 4

Ich habe ein paar ähnliche Fragen gegoogelt und keine Antworten zu meinem Problem gefunden, und es ist eine recht einfache Lösung.

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

Hier geht: wie die OP, ich wollte ein Bild in meinem Github README, und, wissen die Markdown-Syntax für dies zu tun, tippte es in:

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

Damit dies funktioniert, müssen Sie die oben genannten Ersetzungen vornehmen (z. B. MY_IMAGE=image.jpg).

Aber, Moment... Fehlschlag - es gibt kein aktuelles gerendertes Foto! Und der Link ist genau so, wie er von Google Storage angegeben wurde!

Github camo - Anonyme Bilder

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

Ich bin sicher, dass es einen einfacheren Weg gibt, aber besuchen Sie einfach den angegebenen URL-Endpunkt und kopieren Sie die lange URL. Einzelheiten:

Anweisungen

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" aufgerufen)
3. Kopieren Sie diese URL (diejenige, die mit https pas gs ) in einer neuen Browser-Registerkarte/einem neuen 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

Ich hoffe, dass dies zur Beschleunigung und Klärung dieses Problems für alle anderen beiträgt.

Answer 5

Bitte beachten Sie diese vier Schritte, das hat bei mir funktioniert

1-Erstellen Sie einen neuen Eintrag auf GitHub. 2-Ziehen Sie ein Bild in das Kommentarfeld oder laden Sie ein Foto hoch. 3-Warten Sie, bis der Hochladevorgang abgeschlossen ist. 4-Kopieren Sie die URL und verwenden Sie sie in Ihren Markdown-Dateien auf GitHub (verwenden Sie die generierte URL in der Readme-Datei Ihres Repositorys).