Fügen Sie README.md Bilder auf GitHub hinzu

Sie können auch relative Pfade wie verwenden

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

• Sie können ein neues Problem erstellen 
• bilder hochladen (Drag & Drop) 
• Kopieren Sie die URL der Bilder und fügen Sie sie in Ihre README.md-Datei ein.

hier ist ein ausführliches YouTube-Video, das dies ausführlich erklärt hat:

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

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)

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>

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. Das schafft Unordnung und verwirrt die Benutzer. Es ist mühsam, diese Lösung auf eine Abzweigung oder von GitHub zu migrieren.
• Durch die Verwendung des Zweigs gh-pages werden die URLs spröde. Eine andere Person, die an dem Projekt zur Pflege der gh-Seite arbeitet, weiß möglicherweise nicht, dass etwas Externes 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, können Änderungen von mehreren Benutzern auf nachhaltigere Weise verwaltet und verfolgt werden.
• Wenn sich ein Bild auf eine bestimmte Version der Software bezieht, ist es möglicherweise vorzuziehen, 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, inspiriert von dieser Kern , ist die Verwendung eines Assets-Zweigs mit Permalinks zu bestimmten Revisionen .

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 needed below.

Erstellen Sie einen "Permalink" zu dieser Überarbeitung des Bildes und binden Sie es in Markdown ein:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

z.B.

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

Verwenden Sie assets anstelle des sha, um immer das neueste Bild im Assets-Zweig anzuzeigen:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)

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

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

• Problem beim Hinzufügen von Bildern erstellen
• Füge das Bild per Drag & Drop oder per Dateiauswahl

• Dann kopiere Bildquelle

• Füge jetzt ![alt tag](http://url/to/img.png) zu deiner README.md-Datei hinzu

Erledigt!

Alternativ können Sie eine Image-Hosting-Site wie imgur verwenden, deren URL erhalten und in die Datei README.md einfügen.

Musterausgabe

Grundlegende Syntax

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

Hier:

1. my-image-alt-tag: Text, der angezeigt wird, wenn kein Bild angezeigt wird.
2. uRL-zu-Bild: Wie auch immer Ihre Bildressource ist. URI des Bildes

Beispiel:

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

Dies wird wie folgt aussehen:

Fügen Sie einfach ein <img>-Tag zu Ihrer README.md mit relativer src zu Ihrem Repository hinzu. Wenn Sie relative src nicht 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

Beachten Sie hier

Ich muss einige Bilder in meine README - Datei einfügen. Ich weiß nicht wie. TU das.

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 es ermöglicht, dass img-Tags im README.md vorkommen. Außerdem nutzt der Assistent den beliebten Trick, Bilder in GitHub hochzuladen, indem er sie in den Problembereich zieht (wie bereits in einer der Antworten in diesem Thread erwähnt).

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

![img](http://i.imgur.com/yourfilename.png)

Sie können über README.md (oder extern) mit dem alternativen Github-CDN-Link eine Verknüpfung zu Bildern in Ihrem Projekt herstellen.

Die URL sieht so 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 eingebettetes Bild: 

Raw-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 eingebettetes Bild: 

CDN-Link

Über den CDN-Link kann ich eine Verknüpfung zur Datei herstellen, indem (als Bild dargestellt wird):

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

Beispiel eingebettetes Bild: 

So kann ich Bilder aus meinem Projekt sowohl in meiner README.md-Datei als auch in meinem PyPi-Projekt reStructredText-Verdoppelung verwenden ( hier )

Sie können einfach Folgendes 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 in der README -Datei wie folgt referenzieren:

![diagram](diagram.png)

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.

Normalerweise hoste ich das Image auf der Site, dies kann zu jedem gehosteten Image führen. Werfen Sie das einfach in die Readme. Funktioniert für .rst-Dateien, nicht sicher über .md

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

In meinem Fall wollte ich einen Druckbildschirm auf Github, aber auch auf NPM anzeigen. Obwohl die Verwendung des relativen Pfads innerhalb von Github funktionierte, funktionierte er außerhalb von _ nicht. Selbst wenn ich mein Projekt ebenfalls auf NPM verschoben habe (wobei einfach derselbe readme.md Verwendet wird), wurde das Bild nie angezeigt.

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 NPM oder irgendwo anders, wo ich mein Paket veröffentlichen könnte.

Für den Fall, dass Sie Bilder zur Dokumentation hochladen müssen, verwenden Sie git-lfs . Wenn Sie die git-lfs installiert haben, 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 über Folgendes erfolgen:

   cd project_folder
   mkdir doc
   git add doc
   

3. Kopieren Fügen Sie beliebige Bilder in den Dokumentordner ein. Anschließend fügen Sie sie mit dem Befehl git add hinzu.

4. Commit und Push.

5. Die Bilder sind in der folgenden URL öffentlich verfügbar:

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

Dabei gilt: * ^github_username^ 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 Ort einschließlich des Ordners, in dem das Bild gespeichert ist.

Sie können auch das Bild hochladen, dann den Ort auf der Github-Seite Ihres Projekts besuchen und durch das Verzeichnis navigieren, bis Sie das Bild gefunden haben. Drücken Sie dann die Taste download und fügen Sie die URL in die Adressleiste des Browsers ein.

Schauen Sie das aus meinem Projekt als Referenz. 

Dann können Sie die URL verwenden, um sie mit 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)

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

Sobald Sie das Bild auf Ihr Github-Repo gelegt haben.

Dann:

• Öffne das entsprechende Github-Repo in deinem Browser.
• Navigieren Sie zur Zielbilddatei. Öffnen Sie dann das Bild in einem neuen Tab.
• Kopieren Sie die URL
• 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)

Bei mir ist es so

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

Wo

• shadmazumder ist mein username
• Xcode ist das projectname
• master ist das branch
• InOnePicture.png ist das image, in meinem Fall InOnePicture.png befindet sich im Stammverzeichnis.

Verwenden Sie Tabellen, um aufzufallen, es wird ihm einen eigenen Charme verleihen

Die Tabellensyntax lautet:

Trennen Sie jede Spaltenzelle durch das Symbol |

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

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

Ausgabe

Fügen Sie jetzt <img src="url/relativePath"> bei 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, um sie lesbar zu machen.

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 ist egal

Ausgabebild

geholfen von: adam-p

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

Bilder aus dem Repo anzeigen mit:

vorangestellte Domain: https://raw.githubusercontent.com/ oder https://cdn.rawgit.com/

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

verwenden Sie den Tag <img />

• Domäne: 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`

Funktionsbeispielcode, der nach der Verwendung unten angezeigt wird:

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

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

**https://cdn.rawgit.com**:
<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png" />

<img src="https://cdn.rawgit.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg" />

raw.githubusercontent.com:

https://cdn.rawgit.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

NUR DIESE ARBEITEN !!

achten Sie auf den Dateinamen in Großbuchstaben und fügen Sie die PNG-Datei inroot ein.

![Screenshot](screenshot.png)

Wir können das einfach tun,

• erstellen Sie ein neues Problem auf GitHub
• bilder per Drag & Drop auf den Körper div des Issues ziehen

nach wenigen Sekunden wird ein Link erstellt. Kopieren Sie nun den Link oder die Bild-URL und verwenden Sie eine beliebige unterstützte Plattform.

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. Wenn Sie auf das Bild klicken, wird es an das Tag weitergeleitet, das die Referenz auf die andere Site enthält, die Sie umleiten möchten.

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 mithilfe 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 Image. 

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

Docs .

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

1) benutze HTML img tag,

2)! [] (Der Pfad, in dem Ihr Bild gespeichert ist/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 Abstandsproblem auf. Vergewissern Sie sich daher, dass zwischen zwei Pfadwörtern oder im Bildnamen add->% 20 ein Leerzeichen vorhanden ist. genau wie im Browser.

Beide werden funktionieren, wenn du mehr verstehen willst, kannst du meinen Github überprüfen -> https://github.com/adityarawat29

Erwägen Sie die Verwendung einer table, wenn Sie mehrere Screenshots hinzufügen, und möchten Sie diese mit Tabellendaten ausrichten, um die Zugänglichkeit zu verbessern, wie hier gezeigt:

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