在GitHub的README.md中添加图片的方法

技术背景

在GitHub项目的README.md文件中添加图片可以更直观地展示项目的特性、效果等信息，增强文档的可读性和吸引力。然而，许多开发者可能不清楚如何正确地在README.md中添加图片，下面将介绍多种可行的方法。

实现步骤

方法一：使用Markdown语法链接图片

可以使用标准的Markdown语法来链接图片，格式为![alt text](图片URL)。

• 直接链接外部图片：如果图片存储在网络上，可直接使用其URL。例如：![stack Overflow](http://lmsotfy.com/so.png)。
• 链接仓库内的图片：若图片存储在自己的仓库中，可以使用相对路径或直接链接到图片的原始版本。
  • 相对路径示例：![Alt text](relative%20path/to/img.jpg?raw=true "Title")。
  • 直接链接原始版本示例：![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)。

方法二：通过创建新问题上传图片

• 创建一个新的Issue。
• 将图片拖放到Issue中进行上传。
• 复制图片的URL，并粘贴到README.md文件中。

方法三：直接复制粘贴图片

• 复制图片文件（可以通过点击图片文件使用Ctrl + C，或者使用截图工具复制截图）。
• 在编辑README.md文件时，使用Ctrl + V粘贴图片。GitHub会自动将图片上传到user-images.githubusercontent.com，并插入图片链接。

方法四：使用HTML标签添加图片

可以在README.md中使用简单的HTML标签来添加图片，例如：

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

方法五：使用assets分支和永久链接

• 创建并切换到assets分支：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。
• 构建图片的“永久链接”，并使用Markdown语法包裹。若要始终显示assets分支上的最新图片，可使用blob URL：https://github.com/github/{repository}/blob/assets/cat.png。

方法六：使用表格展示图片

使用表格可以让图片更突出，表格语法如下：

| col 1       | col 2       |
|-------------|-------------|
| <img src="图片URL" width="宽度"> | <img src="图片URL" width="宽度"> |

方法七：直接拖放图片

• 打开README.md文件。
• 点击“Edit this file”。
• 将图片拖放到编辑区域。
• 点击“commit changes”。

核心代码

Markdown语法添加图片

![alt text](图片URL)

HTML标签添加图片

<img src="图片路径" alt="图片描述" width="宽度" title="悬停文本">

表格展示图片

| col 1       | col 2       |
|-------------|-------------|
| <img src="图片URL" width="250"> | <img src="图片URL" width="250"> |

最佳实践

• 使用相对路径：如果图片存储在仓库内，优先使用相对路径，这样可以确保在不同环境下图片都能正确显示。
• 整理图片文件夹：在仓库中创建一个专门的文件夹来存放README.md所需的图片，方便管理和维护。
• 使用永久链接：如果需要确保图片链接的稳定性，可使用永久链接或assets分支的方法。

常见问题

• 图片文件名包含空格：如果图片文件名包含空格，需要将空格替换为%20，或者直接去除文件名中的空格。
• 图片无法显示：检查图片URL是否正确，确保网络可访问该图片；如果使用相对路径，检查路径是否正确。
• 跨域问题：如果使用非相对路径的图片链接，要确保服务器支持CORS，否则图片可能无法显示。