如何在Github的README文件中显示动态GIF？

Question

这个问题可能听起来有些愚蠢，但如果我理解正确的话，Github无法在README.md中显示MP4视频文件，但可以显示动画GIF。我想知道最佳实践是将该动画GIF文件存储在仓库本身中吗？

- Zoltan King

---

这个回答是否解决了你的问题？有没有一种方法可以将GIF添加到Markdown文件中？ - faround

Answer 1

GitHub 支持在 README 中使用 GIF 图片。以下是一个使用 Markdown 语法，我在 GitHub 存储库中测试过的例子。

![hippo](https://media3.giphy.com/media/aUovxH8Vf9qDu/giphy.gif)

仓库中的GIF也可以使用，这种链接格式似乎很稳定:

![til](https://raw.githubusercontent.com/hashrocket/hr-til/master/app/assets/images/banner.png)

相对路径也可以：

![til](./app/assets/images/banner.png)

我认为最佳实践是使用像Giphy这样的服务在线托管GIF。如果它存储在代码库中，克隆该代码库的任何人都必须将GIF下载到他们的计算机上。除非它也对应用程序至关重要，否则您可能会让外部服务处理托管。

- Jake Worth

---

只是一点小提示：GIF文件也可以放在代码库中。在这种情况下，需要使用相对路径或 https://raw.githubusercontent.com/<User>/<Repository>/<branch>/<path/to/gif> 访问它。问题是这将是一个二进制文件在Github仓库中... - dan1st

最后一件事：似乎Github也支持在Markdown文件中使用相对路径来引用图片（例如./animation.gif）... - dan1st

@dan1st 我也测试了，可以正常工作；回答已更新。 - Jake Worth

Answer 2

有一种简单的方法。将你的gif上传到代码库中，然后复制你的gif的地址。例如，我上传了一个名为me.gif的gif。这是链接。

https://github.com/Daisyliu6/Daisyliu6/blob/master/me.gif

然后只需将其放入README.md中。

![me](https://github.com/Daisyliu6/Daisyliu6/blob/master/me.gif)

- Daisy

---

终于找到一个有帮助的评论了！谢谢！ - Oleg991

Answer 3

你也可以这样做：

相对路径：

<img src="./assets/image.gif"/>

或者从互联网上获取图片

 <img src="https://media3.giphy.com/media/aUovxH8Vf9qDu/giphy.gif
"/>

另一个优点是您可以指定自己的宽度和高度：

<img src="./assets/image.gif" width="50%" height="50%"/>

- Hrvoje Čukman