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

1841

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

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

Ich habe danach gesucht, aber alles, was ich bekam, waren einige Links, die mich aufforderten, "Bilder im Web zu hosten und den Bildpfad in der Datei README.md anzugeben".

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

Midhun MP
quelle
5
Duplikat von stackoverflow.com/questions/10189356/…, das 2012 veröffentlicht wurde.
leetNightshade
86
GitHub ist kein Programmierwerkzeug.
Lance Roberts

Antworten:

1883

Versuchen Sie diesen Abschlag:

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

Ich denke, Sie können direkt auf die Rohversion eines Bildes verlinken, wenn es in Ihrem Repository gespeichert ist. dh

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)
Captainclam
quelle
137
Sie sollten auch in Betracht ziehen, relative Links zu verwenden
mgalgs
53
Relative Links sind hier keine gute Verwendung. Stellen Sie sich vor, Ihre Readme-Datei wird auch auf npm angezeigt, auf der das Bild nicht auf diese Weise gehostet wird. Sie muss auf GitHub verlinken. Bild-srcs sollten sich in der Domain github.com befinden , nicht in der Subdomain raw.github.com und nicht in der Domain raw.githubusercontent.com .
Lee Crossley
4
Am Ende habe ich mich für die relativen Pfade entschieden (was für mich nur der Name der Bilddatei ist, weil ich alles im Stammverzeichnis habe). Ich hatte 2 Kopien von README.md gepflegt, eine für die lokale Installation in / usr / share / projectname / docs und eine für github. Jetzt kann ich für beide nur dieselbe README.md verwenden, da die Bilddateinamen in beiden Fällen einwandfrei funktionieren. Wenn ich eine Kopie von Teilen meiner README-Datei an einer anderen Stelle veröffentlichen möchte, muss ich die Bilder entweder an einer anderen Stelle hosten oder in die URL raw.github.com eingeben.
Colin Keenan
14
GitHub selbst empfiehlt relative Pfade: help.github.com/articles/relative-links-in-readmes Ein großer Nachteil absoluter Pfade besteht darin, dass andere Zweige, die immer noch auf die alte URL verweisen, unterbrochen werden , wenn das Bild im Master verschoben wird.
Jack O'Connor
3
Derzeit vorgeschlagene Domain scheint nicht zu funktionieren und der Link sollte wie https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true
folgt
425

Sie können auch relative Pfade wie verwenden

![Alt text](relative/path/to/img.jpg?raw=true "Title")
Ergebnisweg
quelle
15
Ja. Dies ist bei weitem der einfachste Weg, es sei denn, Sie sorgen sich um die Leistung. Ich würde beachten, dass dies relativ zum Verzeichnis und nicht zum Repo ist. Wenn Sie also 'myimage.png' im selben Verzeichnis wie 'about_pics.md' haben, dann Das Markup ist:![What is this](myimage.png)
Rich
5
Dies ist eine großartige Lösung, da 1) es funktioniert 2) Bilder auch in einem lokalen Viewer angezeigt werden, ohne dass ein Internetzugang erforderlich ist
Régis B.
2
@Rich können Sie Ihren Kommentar zur Leistung erweitern. Welche Leistungsprobleme gibt es beim relativen Pfadansatz?
Lea Hayes
2
Dieser Weg ist relativ zu was?
Dims
2
Wie Lee Crossley betont hat, sollten Sie relative Links vermeiden, da diese unterbrochen werden, wenn Ihre Readme-Datei auf npm angezeigt wird. Verlinken Sie stattdessen mit dem Flag "? Sanitize = true" auf image src in der Domain github.com, wenn das Bildformat SVG entspricht. Weitere Details finden Sie in dieser SO-Antwort: stackoverflow.com/a/16462143/6798201
AlienKevin
229
  • Sie können eine neue Ausgabe erstellen
  • Laden Sie Bilder hoch (per Drag & Drop)
  • Kopieren Sie die Bild-URL und fügen Sie sie in Ihre README.md-Datei ein.

Hier ist ein detailliertes youTube-Video, das dies ausführlich erklärt:

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

Ahmad Ajmi
quelle
24
Soweit ich weiß, müssen Sie das Problem nicht wirklich speichern . Auf diese Weise benötigen Sie diese Dummy-Tickets im Issue Tracker nicht wirklich. Die Frage ist, ob dies eine "sichere" Methode ist, dh ob GitHub (nach einiger Zeit) erkennt, dass das Bild verwaist ist, und es daher aus dem GitHub-CDN löscht.
Peterh
2
Diese Antwort funktionierte perfekt für mich und musste die neue Ausgabe nicht im Repo speichern. Ich habe auf Youtube ein Video gefunden, das dies ausführlich erklärt: youtube.com/watch?v=nvPOUdz5PL4 .
Francislainy Campos
1
Diese Antwort funktioniert und erfordert wenig Aufwand. Das Problem kann verworfen werden, die URL für das Bild bleibt jedoch bestehen. Die Bild-URL hat die Form: user-images.githubusercontent.com ...
Sabuncu
6
Das ist ein toller Trick! Aber kennt jemand die Antwort auf @ peterhs Frage? Wird GitHub verwaiste Bilder regelmäßig löschen (dh es ist kein Problem damit verbunden)?
Johnny Oshika
1
@ JohnnyOshika Ich bezweifle, dass jemand außerhalb von Github das definitiv beantworten kann. Dies kann davon abhängen, wofür "user-images.githubusercontent.com" verwendet wird. Wenn es sich nur um Bilder handelt, die in Kommentare hochgeladen wurden, ist es plausibel, dass sie nach der fehlenden Datenbeziehung suchen und das Bild entfernen können. Wenn es allgemeiner ist, kann es schwierig sein, definitiv festzustellen, dass es keine Verweise auf die Datei gibt, was es entweder rechenintensiv oder schwierig macht, festzustellen, dass sie ohne Probleme gelöscht werden kann.
Yourbuddypal
127

Es ist viel einfacher als das.

Laden Sie einfach Ihr Bild in das Repository-Stammverzeichnis hoch und verknüpfen Sie den Dateinamen ohne Pfad wie folgt:

![Screenshot](screenshot.png)

quelle
10
Nein, ich denke nicht, dass das Hinzufügen von Screenshots zum Git-Repo eine gute Praxis ist. Vor allem nicht an der Wurzel. Ahmad Ajmis Antwort ist viel besser
Arnaud P
25
Nicht an der Wurzel, aber Sie können dies leicht anpassen docs/imagesoder was auch immer, kleine PNG-Screenshots sind in Ordnung IMHO
Christophe Roussy
5
Dies sollte die akzeptierte Lösung sein, insb. mit Christophes Vorschlag, die Bilder unter das Dokument / Baum /
Mike Ellis
perfekt..!! wenn sich das PNG in einem anderen Ordner befindet. Fügen Sie einfach den Pfad "Ordnername / Screenshot.png" hinzu
Soumen
Ich fand Ihre Antwort für meinen Fall nützlich: Ich bin auf Gitlab und verwende logo.pngBilder im Stammverzeichnis des Repos, um einen Avatar für das Repo festzulegen. Ich wollte dieses Bild in die README.md aufnehmen.
avi.elkharrat
84

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

<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>
Evin1_
quelle
1
Wenn Sie HTML-Tags in Ihrer Markdown-Datei verwenden. Es wird von Pandoc , einem universellen Dokumentenkonverter , ignoriert .
Lorem Ipsum Dolor
1
Dies ist am besten, damit es zentriert oder auf einer Seite platziert werden kann (zumindest für kleinere Bilder).
Alexis Wilke
Wie geben Sie den relativen Pfad an? Es ist nicht relativ zu README.md (in allen Fällen?).
Friederbluemle
55

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 schafft Unordnung und verwirrt die Benutzer. Es ist mühsam, diese Lösung auf einen Fork oder von GitHub zu migrieren.
  • Wenn Sie den Zweig gh-pages verwenden, werden die URLs brüchig. Eine andere Person, die an dem Projekt arbeitet, das die Gh-Seite verwaltet, weiß möglicherweise nicht, dass etwas Äußeres vom Pfad zu diesen Bildern abhängt. Der gh-pages-Zweig weist auf GitHub ein bestimmtes Verhalten auf, das für das Hosten von CDN-Images nicht erforderlich ist.
  • Das Verfolgen von Assets in der Versionskontrolle ist eine gute Sache. Wenn ein Projekt wächst und sich ändert, ist es eine nachhaltigere Möglichkeit, Änderungen durch mehrere Benutzer zu verwalten und zu verfolgen.
  • Wenn ein Bild für eine bestimmte Version der Software gilt, kann es vorzuziehen sein, ein unveränderliches Bild zu verknüpfen. Auf diese Weise findet jeder, der die Readme-Datei dieser Revision liest, das richtige Bild, wenn das Bild später aktualisiert wird, um Änderungen an der Software widerzuspiegeln.

Meine bevorzugte Lösung, die von diesem Kern inspiriert ist, besteht darin, einen Assets-Zweig mit Permalinks zu bestimmten Revisionen zu verwenden .

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 optional, you'll see below.

Erstellen Sie einen "Permalink" zu dieser Revision des Bildes und verpacken Sie ihn in Markdown.

Das manuelle Nachschlagen des Commit-SHA ist jedoch unpraktisch. Drücken Sie daher als Verknüpfung Y, um einen Permalink zu einer Datei in einem bestimmten Commit zu erstellen , wie auf dieser help.github-Seite angegeben.

Verwenden Sie die Blob-URL, um immer das neueste Bild im Assets-Zweig anzuzeigen:

https://github.com/github/{repository}/blob/assets/cat.png 

(Auf derselben GitHub- Hilfeseite zeigen die Dateiansichten die neueste Version in einem Zweig an. )

paulmelnikow
quelle
2
Dies ist eine gute Ergänzung zur akzeptierten Antwort. Assets werden verfolgt, Bilder sind nicht im Master, keine Unordnung. Sei einfach vorsichtig mit dem git reset --hard; Stellen Sie sicher, dass Änderungen festgeschrieben wurden.
Dojuba
In freier Wildbahn auf Ihrer Maschine. Sie können es zeigen , wohin die Datei sein geschieht ( ~/Downloads, /tmpusw.).
Paulmelnikow
Ich schwöre, ich erinnere mich, dass es ein Verzeichnis gibt, das Sie erstellen können und das auf Github nicht angezeigt wird. Bis ich das herausfinden kann, scheint dieser Beitrag das nächstbeste zu sein. Vielen Dank!
Shadoninja
21

Übernehmen Sie Ihr Bild ( image.png ) in einen Ordner ( myFolder ) und fügen Sie die folgende Zeile in Ihre README.md ein :

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

Darush
quelle
17
  • 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 ![alt tag](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
Dies ist meiner Meinung nach der einfachste Weg, sie hinzuzufügen. Ziehen Sie sie einfach in das Feld, kopieren Sie die Adresse und fügen Sie sie mit den folgenden Beschriftungen in Ihre Readme-Datei ein. Boom, du bist fertig.
Joe Hill
15

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

Ich habe einen kleinen Assistenten erstellt, mit dem Sie einfache Bildergalerien für die Readme- Datei Ihres GitHub-Repositorys erstellen und anpassen können: Siehe ReadmeGalleryCreatorForGitHub .

Der Assistent nutzt die Tatsache, dass GitHub das Auftreten von IMG-Tags im Internet zulässt README.md. Außerdem verwendet der Assistent den beliebten Trick, Bilder auf GitHub hochzuladen, indem er sie per Drag & Drop in den Problembereich zieht (wie bereits in einer der Antworten in diesem Thread erwähnt).

Geben Sie hier die Bildbeschreibung ein

B12Toaster
quelle
2
Ich liebe dieses Werkzeug!
Dan
1
Ich liebe auch dieses Tool, dies sollte die Standardfunktion von Git sein !!
Shridutt Kothari
14

<img>Fügen Sie Ihrer README.md einfach ein Tag mit der relativen src zu Ihrem Repository hinzu. Wenn Sie keine relative src verwenden, stellen Sie sicher, dass der Server CORS unterstützt.

Es funktioniert, weil GitHub Inline-HTML unterstützt

<img src="/docs/logo.png" alt="My cool logo"/>
# My cool project and above is the logo of it

Beobachten Sie hier

Raketenabstandhalter
quelle
13

Grundlegende Syntax

![myimage-alt-tag](url-to-image)

Hier:

  1. my-image-alt-tag: Text, der angezeigt wird, wenn das Bild nicht angezeigt wird.
  2. URL-zu-Bild: Was auch immer Ihre Bildressource ist. URI des Bildes

Beispiel:

![stack Overflow](http://lmsotfy.com/so.png)

Dies sieht folgendermaßen aus:

Stapelüberlaufbild durch Alamin

Alamin
quelle
10

Verwenden Sie Tische, um sich abzuheben, es wird ihm einen eigenen Charme verleihen

Die Tabellensyntax lautet:

Trennen Sie jede Spaltenzelle durch ein Symbol |

und Tabellenüberschrift (erste Zeile) bis 2. Zeile bis ---


| Spalte 1 | Spalte 2 |
| ------------ | ------------- |
| Bild 1 | Bild 2 |

Ausgabe

Geben Sie hier die Bildbeschreibung ein


Setzen Sie jetzt einfach <img src="url/relativePath">Bild 1 und Bild 2 ein, wenn Sie zwei Bilder verwenden


Hinweis: Wenn Sie mehrere Bilder verwenden, die nur mehr Spalten enthalten, können Sie die Attribute width und height verwenden, damit sie lesbar aussehen.

Beispiel


| Spalte 1 | Spalte 2 |
| ------------ | ------------- |
| <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">|

Abstand spielt keine Rolle

Ausgabebild

Geben Sie hier die Bildbeschreibung ein

geholfen von: adam-p

Shashankesh Upadhyay
quelle
5
Die Verwendung von Tabellen ist für das Thema der OP-Frage irrelevant.
Mhucka
1
Das Hinzufügen von Screenshots einer App kann auf diese Weise gut gemacht werden, danke
UpaJah
Verwenden Sie CSS anstelle von Tabellen, es wird Ihre Welt rocken.
Jeffmcneill
9

Sie können einfach tun:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Dann können Sie es einfach wie folgt in der READMEDatei referenzieren :

![diagram](diagram.png)

Daniel
quelle
1
Perfekt und knackig.
Biswajit Das
1
es funktioniert, eigentlich denke ich, dass diese Antwort akzeptiert werden sollte
Luk Aron
8

In meinem Fall benutze ich imgur und benutze den direkten Link auf diese Weise.

![img](http://i.imgur.com/yourfilename.png)
Kegham K.
quelle
8

Sie können über den alternativen Github-CDN-Link von README.md (oder extern) auf Bilder in Ihrem Projekt verlinken.

Die URL sieht folgendermaßen aus:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

Ich habe ein SVG-Bild in meinem Projekt, und wenn ich in meiner Python-Projektdokumentation darauf verweise, wird es nicht gerendert.

Projektlink

Hier ist der Projektlink zur Datei (wird nicht als Bild gerendert):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Beispiel für ein eingebettetes Bild: Bild

Roher Link

Hier ist der RAW-Link zur Datei (wird immer noch nicht als Bild gerendert):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Beispiel für ein eingebettetes Bild: Bild

CDN-Link

Über den CDN-Link kann ich einen Link zur Datei erstellen, indem ich (als Bild rendert):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Beispiel für ein eingebettetes Bild: Bild

Auf diese Weise kann ich Bilder aus meinem Projekt sowohl in meiner README.mdDatei als auch in meinem PyPi-Projekt reStructredText doucmentation ( hier ) verwenden.

JGC
quelle
7

Ich habe dieses Problem gelöst. Sie müssen nur auf die Readme-Datei einer anderen Person verweisen.

Zuerst sollten Sie eine Bilddatei in die Github-Codebibliothek hochladen! Dann direkter Verweis auf die Adresse der Bilddatei.



Geben Sie hier die Bildbeschreibung ein

Geben Sie hier die Bildbeschreibung ein

ylgwhyh
quelle
6

Normalerweise hoste ich das Bild auf der Website. Dies kann auf jedes gehostete Bild verlinken. Wirf dies einfach in die Readme-Datei. Funktioniert für .rstDateien, nicht sicher.md

.. image:: https://url/path/to/image
   :height: 100px
   :width: 200 px
   :scale: 50 %
Adam Hughes
quelle
5

In meinem Fall wollte ich einen Druckbildschirm anzeigen, Githubaber auch ein NPM. Obwohl die Verwendung des relativen Pfads innerhalb des Pfads funktionierte Github, funktionierte er außerhalb nicht. Grundsätzlich wurde das Bild nie angezeigt, selbst wenn ich mein Projekt ebenfalls auf NPM(das einfach dasselbe verwendet) readme.mdverschoben habe.

Ich habe ein paar Möglichkeiten ausprobiert, am Ende hat das für mich funktioniert:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Ich sehe mein Bild jetzt korrekt auf NPModer irgendwo anders, wo ich mein Paket veröffentlichen könnte.

Ghiscoding
quelle
5

Für den Fall, dass Sie einige Bilder zur Dokumentation hochladen müssen, ist die Verwendung von git-lfs ein guter Ansatz . Angenommen, Sie haben git-lfs installiert, gehen Sie folgendermaßen vor:

  1. Initialisieren Sie git lfs für jeden Bildtyp:

    git lfs *.png
    git lfs *.svg
    git lfs *.gif
    git lfs *.jpg
    git lfs *.jpeg
    
  2. Erstellen Sie einen Ordner, der als Bildspeicherort verwendet wird, z. doc. Auf GNU / Linux- und Unix-basierten Systemen kann dies erfolgen über:

    cd project_folder
    mkdir doc
    git add doc
    
  3. Kopieren Sie alle Bilder und fügen Sie sie in den Dokumentordner ein. Fügen Sie sie anschließend per git addBefehl hinzu.

  4. Commit und Push.

  5. Die Bilder sind unter folgender URL öffentlich verfügbar:

    https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location im repo ^

Dabei ^github_username^gilt Folgendes : * ist der Benutzername in github (Sie finden ihn auf der Profilseite) * ^repo_name^ist der Repository-Name * ^branch^ist der Repository-Zweig, in den das Bild hochgeladen wird * ^image_location in the repo^ist der Speicherort einschließlich des Ordners, in dem das Bild gespeichert ist.

Sie können das Bild auch zuerst hochladen, dann den Speicherort auf der Github-Seite Ihres Projekts besuchen und durch das Bild navigieren, bis Sie das Bild gefunden haben. Drücken Sie dann die downloadTaste und kopieren Sie die URL aus der Adressleiste des Browsers.

Schauen Sie sich dies aus meinem Projekt als Referenz an.

Anschließend können Sie die URL verwenden, um sie mithilfe der oben genannten Markdown-Syntax einzuschließen:

![some alternate text that describes the image](^github generated url from git lfs^)

Beispiel: Nehmen wir an, wir verwenden dieses Foto. Dann können Sie die Markdown-Syntax verwenden:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)
Dimitrios Desyllas
quelle
5

NUR DAS FUNKTIONIERT !!

Achten Sie auf Ihren Dateinamen in Großbuchstaben im Tag, setzen Sie die PNG-Datei inroot und verknüpfen Sie den Dateinamen ohne Pfad:

![Screenshot](screenshot.png)
Farbod Aprin
quelle
5

Ich erweitere oder füge der bereits akzeptierten Antwort nur ein Beispiel hinzu.

Sobald Sie das Bild auf Ihrem Github-Repo platziert haben.

Dann:

  • Öffnen Sie das entsprechende Github-Repo in Ihrem Browser.
  • Navigieren Sie zur Zielbilddatei. Öffnen Sie das Bild dann einfach in einer neuen Registerkarte. Öffnen des Bildes in einer neuen Registerkarte
  • Kopieren Sie die URL Kopieren Sie die URL von der Registerkarte Browser
  • Und schließlich fügen Sie die URL in das folgende Muster ein ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

In meinem Fall ist es

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Wo

  • shadmazumder ist mein username
  • Xcode ist der projectname
  • master ist der branch
  • InOnePicture.pngist das image, in meinem Fall InOnePicture.pngist im Stammverzeichnis.
Shad
quelle
1
Dies ist die einzige, die für mich einwandfrei funktioniert hat. Keine Verwirrung über Pfade, ob "Master" sich auf ein Verzeichnis oder einen Zweig bezieht, in dem sich der Root-Start befindet usw. Nur die Einschränkung ist, dass Firefox (72) es Ihnen nicht erlaubt, Bilder in separaten Tabs zu öffnen, daher ist dies nur Chrome für den Moment Überlegen.
Thomas Browne
5

Es gibt zwei einfache Möglichkeiten, dies zu tun:

1) benutze HTML img Tag,

2)! [] (Der Pfad, in dem Ihr Bild gespeichert wird / image-name.png)

Den Pfad können Sie von der URL im Browser kopieren, während Sie das Bild geöffnet haben. Möglicherweise tritt ein Problem mit dem Abstand auf. Stellen Sie daher sicher, dass zwischen zwei Pfadwörtern oder im Bildnamen add->% 20 ein Leerzeichen vorhanden ist. Genau wie der Browser.

Beide werden funktionieren. Wenn Sie mehr verstehen möchten, können Sie meinen Github überprüfen -> https://github.com/adityarawat29

Aditya Singh Rawat
quelle
Das hat bei mir funktioniert. Ein Bild in einem Ordner "apps" unter der README.md habe ich verwendet:![](images/ss_apps.png)
cdsaenz
1
Ich bin überrascht, dass nur Aditya erwähnt hat, dass Leerzeichen ein Problem sind, und das auf ziemlich dumme Weise - keine Fehler, aber Ihre Syntax wird einfach so angezeigt, als würde es überhaupt keine solche Funktion geben. Upvote von mir für die Erwähnung.
Tammi
5

Diese Antwort finden Sie auch unter: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Zeigen Sie Bilder vom Repo an mit:

Domain voranstellen: https://raw.githubusercontent.com/

Flagge anhängen: ?sanitize=true&raw=true

Verwendung <img />Tag

Beispiel-URL funktioniert für SVG, PNG und JPG mit:
  • Domain :raw.githubusercontent.com/
  • Benutzername :YourUserAccount/
  • Repo :YourProject/
  • Zweig :YourBranch/
  • Pfad :DirectoryPath/
  • Dateiname :example.png

Funktioniert für SVG, PNG und JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Arbeitsbeispielcode, der nach der Verwendung unten angezeigt wird:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com :

Vielen Dank: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown / readme.md

CrandellWS
quelle
Es hat bei mir nicht funktioniert, bis ich die Abfragezeichenfolge entfernt habe.
Mhenry1384
1
Zumindest für .png und raw.githubusercontent.com funktioniert sanitize = true nicht und sollte entfernt werden. raw = true funktioniert gut. github.com/sphinxy/AppDynamics.Playground/blob/master/README.md
Danila Polevshikov
1
rawgit.com wurde 2018 heruntergefahren und sollte nicht mehr verwendet werden. Sie sollten es aus dieser Antwort entfernen. raw.githubusercontent.com , das Sie auch erwähnen, ist die nächstgelegene Alternative.
Rory O'Kane
4

Ich habe eine andere Lösung gefunden, aber ganz anders und ich werde es erklären

Grundsätzlich habe ich das Tag verwendet, um das Bild anzuzeigen, aber ich wollte zu einer anderen Seite gehen, als auf das Bild geklickt wurde, und hier ist, wie ich es gemacht habe.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Wenn Sie es direkt nebeneinander platzieren, getrennt durch eine neue Linie, geht es beim Klicken auf das Bild vermutlich zu dem Tag, das die href zu der anderen Site enthält, die Sie umleiten möchten.

LuisDev99
quelle
2

NEUESTE

Wikis können PNG-, JPEG- oder GIF-Bilder anzeigen

Jetzt können Sie verwenden:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-ODER-

Folge diesen Schritten:

  1. Navigieren Sie auf GitHub zur Hauptseite des Repositorys.

  2. Klicken Sie unter Ihrem Repository-Namen auf Wiki.

  3. Navigieren Sie in der Wiki-Seitenleiste zu der Seite, die Sie ändern möchten, und klicken Sie dann auf Bearbeiten.

  4. Klicken Sie in der Wiki-Symbolleiste auf Bild .

  5. Geben Sie im Dialogfeld "Bild einfügen" die Bild-URL und den Alternativtext ein (der von Suchmaschinen und Bildschirmleseprogrammen verwendet wird).
  6. OK klicken.

Siehe Dokumente .

Lal Krishna
quelle
2

Verwenden Sie a, tablewenn Sie mehrere Screenshots hinzufügen, und richten Sie diese mithilfe von Tabellendaten aus, um die Zugänglichkeit zu verbessern.

Nachmittagstee

Wenn Ihr Markdown-Parser dies unterstützt, können Sie role="presentation"dem TABLE-Element auch das WIA-ARIA-Attribut hinzufügen und die thTags weglassen .

Josh Habdas
quelle
2

Schritt für Schritt: Erstellen Sie zunächst einen Ordner (benennen Sie Ihren Ordner) und fügen Sie das Bild / die Bilder, die Sie hochladen möchten, in die Datei Readme.md ein. (Sie können das Bild / die Bilder auch in einen beliebigen vorhandenen Ordner Ihres Projekts einfügen.) Klicken Sie nun auf das Bearbeitungssymbol der Datei Readme.md

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

Nach dem Hinzufügen des Bildes sehen Sie eine Vorschau der Änderungen auf der Registerkarte "Vorschau der Änderungen". Ihr Bild finden Sie hier. zum Beispiel so, in meinem Fall,

![](app/src/main/res/drawable/refrence_image.png)

App-Ordner -> SRC-Ordner -> Hauptordner -> Res-Ordner -> Zeichenordner -> und innerhalb des Zeichenordners befindet sich die Datei hrefence_image.png. Um mehrere Bilder hinzuzufügen, können Sie dies folgendermaßen tun:

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Hinweis 1 - Stellen Sie sicher, dass der Name Ihrer Bilddatei keine Leerzeichen enthält. Wenn es Leerzeichen enthält, müssen Sie für jedes Leerzeichen zwischen dem Dateinamen% 20 hinzufügen. Es ist besser, die Leerzeichen zu entfernen.

Hinweis 2 - Sie können die Bildgröße sogar mithilfe von HTML-Tags ändern, oder es gibt andere Möglichkeiten. Sie können es für mehr googeln. wenn du es brauchst.

Schreiben Sie anschließend Ihre Nachricht zum Festschreiben von Änderungen und schreiben Sie Ihre Änderungen fest.

Es gibt viele andere Hacks, wie man es macht, ein Problem erstellt usw. usw. Bei weitem ist dies die beste Methode, die mir begegnet ist.

Jwala Kumar
quelle
1

Wir können das einfach machen,

  • Erstelle ein neues Problem auf GitHub
  • Ziehen Sie Bilder per Drag & Drop auf den Hauptteil divder Ausgabe

Nach einigen Sekunden wird ein Link generiert. Kopieren Sie nun den Link oder die Bild-URL und verwenden Sie sie auf jeder unterstützten Plattform.

iNet
quelle
Ihre Lösung funktioniert! Es ist leicht. Vielen Dank
Jeanne vie
1

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

![Alt text]("enter repository image URL here") 
Marium Jawed
quelle
1

Es gibt noch eine andere Option, die ich nicht erwähnt habe. Sie können einfach ein anderes Repository unter Ihrem Benutzer oder Ihrer Organisation mit dem Namen "Assets" erstellen. Schieben Sie Ihre Bilder in dieses Repo und referenzieren Sie sie aus Ihren anderen Repos:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

Ich habe das in einem meiner Repos gemacht und es passt mir gut. Ich kann meine README-Bilder für alle meine Projekte unabhängig von meinem Code versionieren, sie aber trotzdem alle an einem Ort aufbewahren . Keine Probleme oder Verzweigungen oder andere leicht verlegte Artefakte erforderlich.

Jason
quelle