在没有外部托管的情况下将图像添加到 GitHub README.md

在没有外部托管的情况下将图像添加到 GitHub README.md
在没有外部托管的情况下将图像添加到 GitHub README.md
Arthur Petit
2024年6月28日星期五 下午1:12:16

直接在 GitHub README.md 中嵌入图像

最近，我加入了 GitHub 并开始在那里托管我的一些项目。我遇到的任务之一是需要在我的自述文件中包含图像。

尽管寻找解决方案，我发现的只是在第三方网络服务上托管图像并链接到它们的建议。有没有办法直接添加图片而不依赖外部托管？

命令 描述
base64.b64encode() 将二进制数据编码为 Base64 字符串，对于直接在 Markdown 中嵌入图像非常有用。
.decode() 将 Base64 字节转换为字符串，使其准备好嵌入 HTML/Markdown 中。
with open("file", "rb") 以二进制读取模式打开文件，这是读取图像数据所必需的。
read() 读取文件的内容，此处用于读取图像数据进行编码。
write() 将数据写入文件，此处用于将 Base64 编码的字符串输出到文本文件。
f-string 用于在字符串文字中嵌入表达式的 Python 语法，用于将编码图像嵌入 HTML img 标签中。

如何在 GitHub README.md 中嵌入图像

上面提供的脚本演示了在不依赖第三方托管服务的情况下将图像添加到 GitHub README.md 文件的不同方法。第一个脚本使用 base64.b64encode() 将图像转换为 Base64 编码的字符串。此方法很有用，因为它允许您将图像直接嵌入到 README 文件中。这 with open("image.png", "rb") 命令以二进制读取模式打开图像文件，允许脚本读取图像数据。这 encoded_string = base64.b64encode(image_file.read()).decode() line 将图像数据编码为 Base64 字符串，并将其解码为适合嵌入 HTML 的格式。最后，脚本将此编码字符串写入文本文件，格式为 HTML 标签。

第二个脚本演示了如何使用 GitHub 的原始 URL 功能来嵌入图像。通过将图像直接上传到存储库并复制原始 URL，您可以在 README.md 文件中引用此 URL。命令 ![Alt text](https://raw.githubusercontent.com/username/repo/branch/images/image.png) 展示如何在 Markdown 中格式化图像链接。此方法很简单，不需要额外的编码，但它依赖于存储库中可用的图像。第三种方法使用相对路径来引用存储在存储库中的图像。将图片上传到特定目录后，可以使用相对路径 ![Alt text](images/image.png) 在你的 README.md 中。只要目录结构保持一致，这种方法就可以使图像链接在存储库的不同分支和分叉中发挥作用。

使用 Base64 编码在 GitHub README.md 中嵌入图像

用于 Base64 编码的 Python 脚本

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

通过原始内容 URL 将图像添加到 GitHub README.md

使用 GitHub 的原始 URL 功能

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)

通过 Markdown 使用相对路径在 README.md 中嵌入图像

在 Markdown 中使用相对路径

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

使用 GitHub Actions 在 README.md 中嵌入图像

在不使用第三方托管的情况下将图像包含在 GitHub README.md 文件中的另一种方法是使用 GitHub Actions 自动执行图像嵌入过程。 GitHub Actions 可以直接在您的存储库中自动化工作流程。例如，您可以创建一个自动将图像转换为 Base64 并更新 README.md 文件的工作流程。此方法可确保添加到存储库中特定文件夹的任何图像都会自动编码并嵌入到自述文件中。

要设置这样的工作流程，您需要在 .github/workflows 您的存储库的目录。该文件将定义工作流程的步骤，包括检出存储库、运行脚本来编码图像以及将更改提交回存储库。通过自动化此过程，您可以使用最新图像更新 README.md，而无需手动干预，从而提高效率并保持简化的工作流程。

有关在 GitHub README.md 中嵌入图像的常见问题

  1. 如何将图像上传到我的 GitHub 存储库？
  2. 您可以通过将图像拖放到 GitHub 上的文件视图中或使用 git add 命令后跟 git commit 和 git push。
  3. 什么是 Base64 编码？
  4. Base64 编码使用 ASCII 字符将二进制数据转换为文本格式，使其适合将图像等二进制文件嵌入到文本文档中。
  5. 如何获取 GitHub 上图像的原始 URL？
  6. 单击存储库中的图像，然后单击“下载”按钮。原始 URL 将显示在浏览器的地址栏中。
  7. 为什么在 README.md 中使用图像的相对路径？
  8. 相对路径确保图像链接在存储库的不同分支和分支中保持功能。
  9. 我可以使用 GitHub Actions 自动执行图像嵌入吗？
  10. 是的，您可以使用 GitHub Actions 创建工作流程来自动编码图像并更新 README.md 文件。
  11. 我需要任何特殊权限才能使用 GitHub Actions 吗？
  12. 只要您拥有存储库的写入权限，您就可以创建并运行 GitHub Actions 工作流程。
  13. 在 README.md 中使用 Base64 编码有什么好处？
  14. 将图像嵌入为 Base64 编码字符串可使其独立包含在 README.md 文件中，从而消除对外部图像托管的依赖。
  15. 我可以在 README.md 中嵌入动画 GIF 吗？
  16. 是的，您可以使用所描述的相同方法嵌入动画 GIF，无论是通过直接链接、Base64 编码还是相对路径。

关于在 README.md 中嵌入图像的最终想法

在 GitHub README.md 文件中嵌入图像可以增强项目的视觉吸引力和清晰度。通过利用 Base64 编码、原始 URL 和相对路径等方法，您可以有效地包含图像，而无需依赖外部托管服务。使用 GitHub Actions 自动执行此过程进一步简化了图像管理。这些策略有助于保持您的工作的专业和精美的呈现，使您的存储库更具吸引力和信息量。