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?

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)

Sie können auch relative Pfade wie verwenden

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

• 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

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

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

• 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

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

<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

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:

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

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

geholfen von: adam-p

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)

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

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

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:

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:

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:

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

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 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 %

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.

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)

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)

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.
• 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)

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.

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

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

• 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

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.

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 .

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

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 .

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.

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.

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

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.