Vor kurzem bin ich zu GitHub gekommen. Ich habe dort einige Projekte gehostet.
Ich muss einige Bilder in meine README - Datei einfügen. Ich weiß nicht, wie ich das machen soll.
Ich habe danach gesucht, aber alles, was ich bekam, war ein paar Links, die mir sagen "Bilder im Web hosten und den Bildpfad in der Datei README.md angeben".
Gibt es eine Möglichkeit, dies ohne das Hosten der Bilder auf Webhosting-Diensten von Drittanbietern zu tun?
Versuchen Sie diesen Abschlag:

Ich denke, Sie können direkt auf die Rohversion eines Images zugreifen, wenn es in Ihrem Repository gespeichert ist. d.h.

Bearbeiten: Ich habe gerade bemerkt, dass ein Link zu einem Artikel verlinkt wurde, der die Verwendung von gh-pages vorschlägt. Relative Links können auch eine bessere Idee sein als die absoluten URLs, die ich oben gepostet habe.
Sie können auch relative Pfade wie verwenden

hier ist ein ausführliches YouTube-Video, das dies ausführlich erklärt hat:
Laden Sie einfach Ihr Bild in das Repository-Stammverzeichnis hoch, und verknüpfen Sie den Dateinamen ohne Pfad wie folgt:

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

z.B.

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

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

Dann kopiere Bildquelle
Füge jetzt 
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.
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.

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.
Hier ist der Projektlink zur Datei (wird nicht als Bild gerendert):
https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg
Beispiel eingebettetes Bild:
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:
Ü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:

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:

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:
Initialisieren Sie git lfs für jeden Bildtyp:
git lfs *.png
git lfs *.svg
git lfs *.gif
git lfs *.jpg
git lfs *.jpeg
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
Kopieren Fügen Sie beliebige Bilder in den Dokumentordner ein. Anschließend fügen Sie sie mit dem Befehl git add
hinzu.
Commit und Push.
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:

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

Ich füge nur ein Beispiel zu der bereits akzeptierten Antwort hinzu.
Sobald Sie das Bild auf Ihr Github-Repo gelegt haben.
Dann:

Bei mir ist es so

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
?sanitize=true&raw=true
<img />
raw.githubusercontent.com/
YourUserAccount/
YourProject/
YourBranch/
DirectoryPath/
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:
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.

Wir können das einfach tun,
div
des Issues ziehennach 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.
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:
Navigieren Sie auf GitHub zur Hauptseite des Repositorys.
Klicken Sie unter Ihrem Repository-Namen auf Wiki.
Navigieren Sie mithilfe der Wiki-Seitenleiste zu der Seite, die Sie ändern möchten, und klicken Sie dann auf Bearbeiten.
Klicken Sie in der Wiki-Symbolleiste auf Image.
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.