Bilder in ein GitHub-Wiki-Repository (Gollum) einbetten?

Die Github-Wikis werden von einem separaten Git-Repository und dann vom Hauptprojekt-Repository unterstützt.

In diesem Beitrag des Github-Teams klingt es so, als ob Sie in der Lage sein sollten, Links zu Bildern zu erstellen, die im Wiki-Repository im Wiki-Markup gespeichert sind.

Bilder und Ordner

Sie können jetzt auf Bilder verweisen, die im Git-Repository gehostet werden.

Ich habe das Repository meines Wikis ausgecheckt und einen Ressourcenordner und ein Bild hineingeschoben. Meine Frage ist, wie gehe ich mit diesem Bild um ?

Ist das überhaupt möglich oder habe ich etwas falsch verstanden?

Um relative Pfade zu verwenden, gehen Sie wie folgt vor:

[[foo.jpg]]

Weitere Informationen finden Sie auf der Seite des Demo-Wikis zu Bildern .

Für Zuschauer, die Bilder in einem Github-Wiki anzeigen möchten, habe ich die folgende Methode gefunden:

• Gehen Sie zur Registerkarte "Git Access" auf der Wiki-Seite Ihres Repositorys und rufen Sie den SSH-Pfad ab, der ungefähr so ​​lauten sollte: git@github.com: USER / REPO.wiki.git wobei USER Ihr Kontoname und REPO der ist Repository-Name.

• Verwenden Sie auf Ihrem lokalen Computer das Git-Befehlszeilentool, das Sie in das lokale Verzeichnis Ihrer Wahl cd möchten, und rufen Sie das Repository über auf

  Git-Klon git@github.com: USER / REPO.wiki.git

• Jetzt in diesem Repository erstellen Sie ein Bildverzeichnis, ich nenne es "Bilder" und lege alle gewünschten Bilder in das Verzeichnis

• Und dann schiebe dein Wiki-Git-Verzeichnis auf Github

• Sie können die Bilder auf der Registerkarte "Seiten" nicht physisch sehen. Wenn Sie jedoch einfach auf die Bilder in einem lokalen Link verweisen, sollten Sie sie sehen können. Beispiel mit Markdown unten:

  ![Alt attribute text Here](images/YOURIMAGE.ext)

• Sie können das Bild auch als Link selbst einbetten, indem Sie es wie folgt weiter einschließen:

  [![Alt attribute text Here](images/YOURIMAGE.ext)](http://Yoursite.com)

Sie können Ihrer lokalen Kopie auch Unterverzeichnisse hinzufügen, um das Wiki besser zu organisieren, da sie auf der Registerkarte "Seiten" einfach aufgelistet werden. Beachten Sie jedoch, dass die Registerkarte "Seiten" das Verzeichnis auch dann nicht auflistet, wenn das neue Verzeichnis verschoben wird.

Keine der Antworten scheint zu funktionieren, wenn ein Bild hinzugefügt wird readme.md. Ich habe jedoch eine Lösung:

Wenn die URL des Bildes lautet:

https://github.com/Username/Repository-Name/blob/master/Directory-Inside-Repository/image.png

Durch Ersetzen blobdurch erhalten rawSie die URL des Rohbilds:

https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png

Jetzt würden Sie das Bild mit normalem Markdown einbetten:

![Image Alt](https://github.com/Username/Repository-Name/raw/master/Directory-Inside-Repository/image.png)

UPDATE: Ab sofort liefert GitHub auch Rohbilder aus einer anderen Subdomain raw.github.com. Sie können also auch Folgendes verwenden:

https://raw.github.com/Username/Repository-Name/master/Directory-Inside-Repository/image.png

BEISPIEL: https://raw.github.com/Automattic/liveblog/master/screenshot-1.png

Relative Pfadarbeit für mich so:

Homepage des Wikis:

![text](wiki/images/someimage.png)

Unterseite des Wikis:

![text](images/someimage.png)

Beachten Sie, dass beim Erstellen einer Vorschau das Bild nicht angezeigt wird. Ich habe es gespeichert.

Wenn Sie ein Bild schnell per Drag & Drop hochladen möchten, können Sie Folgendes ausführen (wenn auch hackisch):

Erstellen Sie ein Dummy-Problem. Ziehen Sie Ihr Bild dorthin und legen Sie es dort ab. Kopieren Sie den hochgeladenen Markdown-Bildcode und fügen Sie ihn in Ihr Wiki ein.

Nachdem Sie das Problem einmal erstellt haben, können Sie es dazu beliebig oft verwenden.

Ich hoffe, dies hilft jedem, der nach einer schnellen Lösung sucht, ohne dass sich das Bild im Repo befinden muss.

Hier ist ein praktischer Weg, dies zu tun:

• Gehen Sie zu jedem Thema auf Github
• Im Kommentarbereich können Sie Dateien anhängen, einfach per Drag & Drop Ihr ​​Bild auswählen oder einfügen
• Kopieren Sie den im Textbereich angezeigten Code / Link
• Fügen Sie es in das Wiki ein
• Gewinn!

Sie müssen im Vergleich zur @ tiby-Lösung nicht einmal ein Problem erstellen oder ändern!

Herausgefunden.

Die URL ist wie folgt formatiert

https://raw.github.com/wiki/username/project/pathtoimage/imagename.extension

pathtoimage es ist optional

James 'URL-Format hat bei mir nicht funktioniert, vielleicht wurde es geändert. Ich habe benutzt:

https://github.com/username/project/wiki/pathtoimage/image.extension

Wo pathtoimageist optional.

Schließlich wurden die Bilder mit der von nerdwin beschriebenen Methode in das Repository aufgenommen und mit im Wiki angezeigt ![test](test.jpg)

Der folgende Markdown verweist auf ein Bild in Ihrem GitHub- Repo aus dem entsprechenden GitHub- Wiki

![My Alt Text](../blob/master/Path/ToAsset/In/Repo.png?raw=true)

Im obigen Beispiel wird davon ausgegangen, dass Sie in Ihrem Repo die folgende Dateistruktur haben

• Pfad
  • ToAssets
    • Im
      • Repo.png

Wenn ich für ein Beispiel aus der realen Welt dieses Bild in Github aus dem entsprechenden Wiki referenzieren möchte, würde ich diesen Markdown verwenden

![Azure App Settings](../blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)

Vorsichtsmaßnahmen

1. Fallangelegenheiten
2. Wenn Sie sich auf der speziellen Homepage des Wikis befinden, müssen Sie nicht mit dem ../ aufsteigen. In meinem obigen Beispiel wäre der richtige Link

Für die Homepage:

![Azure App Settings](blob/master/TrelloWorld/TrelloWorld.Server/Assets/Azure_AppSettings.png?raw=true)

Verwenden Sie den relativen Pfad

Das Wiki befindet sich unter [repositoryname]/wiki

Die Dateien im Repository befinden sich unter [repositoryname]/raw/master/[file path in repository]

Verwenden Sie also einfach den relativen Pfad: ../raw/master/[file path in repository]

Ich habe sowohl Bilder als auch PDFs in meine Wikis eingefügt. Ich klone das Wiki und füge ein imagesund ein filesVerzeichnis hinzu. Dann verwende ich den folgenden Markdown, um Bildlinks einzubetten und Dateilinks hinzuzufügen:

Bilder:

[[/images/path/to/image.ext|ALT TEXT]]

Der führende Schrägstrich ist nicht erforderlich, wenn sich Ihre Wiki-Seiten alle auf der Stammebene befinden, aber ich verwende Unterverzeichnisse und ein absoluter Pfad wird korrekt aufgelöst und hält die Dinge einfach.

Dateien:

[link text](files/path/to/file.ext "ALT TEXT")

Beachten Sie, dass kein führender Schrägstrich für den Wiki- filesPfad als Link in diesem Format korrekt aufgelöst werden kann.

Ich habe dies detaillierter in einem GitHub-Gist dokumentiert

Verwenden Sie Folgendes, um eine Miniaturansicht eines externen Bildes einzubetten: ![Image](<external link to the image>)

Der Kommentar von @ Drew Noakes zur ursprünglichen Frage hat es für mich getan:

Die Syntax für das Bild, das angezeigt werden soll:

[[/images/imageName.png]]

Dieses Bild wurde nur beim Umbenennen angezeigt:

wikiPage.md --> wikiPage.wiki

Die folgende Ordnerstruktur wurde im Wiki-Repository verwendet:

repository.wiki
   |--wikiPage.wiki
   |--images
        |--imageName.png       

ABER:

Die Syntax in .wiki unterscheidet sich von .md-Dateien.

Viele der Antworten haben bei mir nicht funktioniert, hier ist, was schließlich funktioniert hat:

![](../raw/master/Images/ImportantImage.png)

Verwenden des Editor-Modus "Markdown" und einer Unterseite wie:

https://github.com/project/repo/wiki/MyPage

-John