Hinzufügen von Bildern zu Ihrer GitHub README.md ohne externes Hosting

Bilder direkt in GitHub README.md einbetten

Vor kurzem bin ich GitHub beigetreten und habe begonnen, dort einige meiner Projekte zu hosten. Eine der Aufgaben, denen ich begegnete, war die Notwendigkeit, Bilder in meine README-Datei aufzunehmen.

Obwohl ich nach Lösungen suchte, fand ich lediglich Vorschläge, Bilder auf Webdiensten Dritter zu hosten und darauf zu verlinken. Gibt es eine Möglichkeit, Bilder direkt hinzuzufügen, ohne auf externes Hosting angewiesen zu sein?

So betten Sie Bilder in GitHub README.md ein

Die oben bereitgestellten Skripte veranschaulichen verschiedene Methoden zum Hinzufügen von Bildern zu Ihrer GitHub README.md-Datei, ohne auf Hosting-Dienste von Drittanbietern angewiesen zu sein. Das erste Skript verwendet base64.b64encode() um ein Bild in eine Base64-codierte Zeichenfolge umzuwandeln. Diese Methode ist nützlich, da Sie damit das Bild direkt in die README-Datei einbetten können. Der with open("image.png", "rb") Der Befehl öffnet die Bilddatei im binären Lesemodus, sodass das Skript die Bilddaten lesen kann. Der encoded_string = base64.b64encode(image_file.read()).decode() Zeile kodiert die Bilddaten in einen Base64-String und dekodiert ihn in ein Format, das für die Einbettung in HTML geeignet ist. Schließlich schreibt das Skript diese codierte Zeichenfolge in eine Textdatei im HTML-Format Etikett.

Das zweite Skript zeigt, wie Sie die Roh-URL-Funktion von GitHub zum Einbetten von Bildern verwenden. Indem Sie Ihr Bild direkt in Ihr Repository hochladen und die Roh-URL kopieren, können Sie in Ihrer README.md-Datei auf diese URL verweisen. Der Befehl  zeigt, wie der Bildlink in Markdown formatiert wird. Diese Methode ist unkompliziert und erfordert keine zusätzliche Codierung, setzt jedoch voraus, dass das Bild in Ihrem Repository verfügbar ist. Die dritte Methode verwendet relative Pfade, um in Ihrem Repository gespeicherte Bilder zu referenzieren. Nachdem Sie Ihr Bild in ein bestimmtes Verzeichnis hochgeladen haben, können Sie den relativen Pfad verwenden  in Ihrer README.md. Dieser Ansatz sorgt dafür, dass Ihre Bildverknüpfungen in verschiedenen Zweigen und Zweigen des Repositorys funktionsfähig bleiben, solange die Verzeichnisstruktur konsistent bleibt.

import base64
with open("image.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode()
with open("encoded_image.txt", "w") as text_file:
    text_file.write(f"<img src='data:image/png;base64,{encoded_string}'>")

1. Upload your image to the repository (e.g., /images/image.png)
2. Copy the raw URL of the image: https://raw.githubusercontent.com/username/repo/branch/images/image.png
3. Embed the image in your README.md:
![Alt text](https://raw.githubusercontent.com/username/repo/branch/images/image.png)

1. Upload your image to the repository (e.g., /images/image.png)
2. Use the relative path in your README.md:
![Alt text](images/image.png)
3. Commit and push your changes to GitHub

Einbetten von Bildern in README.md mit GitHub-Aktionen

Eine weitere Methode, Bilder in Ihre GitHub README.md-Datei einzubinden, ohne das Hosting von Drittanbietern zu nutzen, besteht darin, den Bildeinbettungsprozess mithilfe von GitHub Actions zu automatisieren. GitHub Actions kann Workflows direkt in Ihrem Repository automatisieren. Sie können beispielsweise einen Workflow erstellen, der Bilder automatisch in Base64 konvertiert und Ihre README.md-Datei aktualisiert. Dieser Ansatz stellt sicher, dass jedes Bild, das einem bestimmten Ordner in Ihrem Repository hinzugefügt wird, automatisch codiert und in die README-Datei eingebettet wird.

Um einen solchen Workflow einzurichten, müssen Sie eine YAML-Datei im erstellen .github/workflows Verzeichnis Ihres Repositorys. Diese Datei definiert die Schritte des Workflows, einschließlich des Auscheckens des Repositorys, der Ausführung eines Skripts zum Kodieren von Bildern und der Rückübernahme der Änderungen in das Repository. Durch die Automatisierung dieses Prozesses können Sie Ihre README.md ohne manuellen Eingriff mit den neuesten Bildern auf dem neuesten Stand halten, was die Effizienz steigert und einen optimierten Arbeitsablauf aufrechterhält.