有没有一种方法可以将gif添加到Markdown文件中？

228

我想将此gif添加到GitHub风格的markdown文件中。如果无法在GitHub中完成，是否可以在markdown的另一个版本中进行？

markdown gif github-flavored-markdown

— Zaynaib Giwa
source

如何将屏幕快照添加到github存储库中的README的可能重复项？或将图像添加到github上的README.md

— Michael Recachinas

482

显示gif需要两件事

1-如以下示例中一样使用此语法

![Alt Text](https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif)

产量：

替代文字

2-图片网址必须以gif结尾

3-对于后代：如果上面的.gif链接变坏，您将不会看到图像，而是会看到替代文本和URL，如下所示：

替代文字

4-为调整gif的大小，您可以像下面的Github教程链接中那样使用此语法

<img src="https://media.giphy.com/media/vFKqnCdLPNOKc/giphy.gif" width="40" height="40" />

产量：

— 哈立德·安纳哈尔（Khaled Annajar）
source

3

@NikKov真实！！这是一个技术问题。

— 哈立德·安娜哈

6

那个孩子真的很难打他的头。在瓷砖地板上太硬，很可能受到脑部损伤或至少受到严重脑震荡。实际上，我将其删除，因为我认为它令人反感，然后将其替换为更好的东西。

— eduncan911

3

请注意，如果您的gif太大，则会看到错误的图像框。较小的gif效果很好。

— Shubham Chaudhary

1

我只是投票给答案，不仅是因为正确，还因为每个人都喜欢小猫！:)

— MilitelloVinx

2

@加蒂我不知道。我认为您需要为此提出一个新问题。

— 哈立德·安娜哈

101

从Markdown备忘单：

您可以将其添加到您的仓库中，并使用图像标签进行引用：

Inline-style: 
![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1")

Reference-style: 
![alt text][logo]

[logo]: https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 2"

内联样式：替代文字

参考样式：替代文字

或者，您可以直接使用url：

![](http://www.reactiongifs.us/wp-content/uploads/2013/10/nuh_uh_conan_obrien.gif)

— 埃里普
source

@erip如何使用Giphy的gif？

— AbhimanyuAryan

1

@AbhimanyuAryan您可以通过右键单击它们并获取其地址来找到这些gif的地址。例如：media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif

— erip

与github上的markdown文件链接的Gif（以及我相信的其他图像）由camo提供，文件限制为5MB。

— 0xcaff

10

有gif文件。
将gif文件推送到您的github存储库
单击github存储库上的文件以获取gif的github地址
在您的自述文件中： ![alt-text](link)

下面的例子： ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)

— 温妮·潘（Winnie Phan）
source

7

将其放在类似repo的目录中/img，然后使用![alt text](img/my-image.png)

— Braden Best，

6

吉菲·格查（Giphy Gotcha）

遵循上面列出的2个要求（必须结束.gif并使用图像语法）之后，如果您对giphy的gif遇到麻烦：

确保您具有正确的Giphy网址！您不能仅仅添加.gif到这一部分的末尾并使其起作用。

如果仅从浏览器复制URL，则会得到类似以下内容的信息：

https://giphy.com/gifs/gol-automaton-game-of-life-QfsvYoBSSpfbtFJIVo

您需要单击“复制链接”，然后专门抓取“ GIF链接”。注意正确的一点，media.giphy.com而不只是giphy.com：

https://media.giphy.com/media/QfsvYoBSSpfbtFJIVo/giphy.gif

— 乔丹·阿内森
source

2

只需将.gif文件上传到GitHub的基本文件夹中，然后README.md使用此代码进行编辑

![](name-of-giphy.gif)

— 维沙尔·谢拉克
source

0

除了以上所有答案：

如果您要为github存储库README.md使用gif，并且不想从根使用gif，仅复制浏览器的URL是不够的，例如，浏览器的URL像这样：

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif

但是您应该在github帐户中打开gif并rihgt单击它，然后单击copy image address或类似这样的内容：

https://github.com/ashkan-nasirzadeh/simpleShell/blob/master/README%20assets/shell-gif.gif?raw=true

— 阿什坎·纳西扎德
source

0

从本地上传：

将您的.gif文件添加到Github存储库的根目录并推送更改。
前往README.md
加上这个 ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
提交和gif应该可以看到。

使用网址显示gif：

前往README.md
以这种格式添加 ![Alt text](https://sample/url/name-of-gif-file.gif)
提交和gif应该可以看到。

希望这可以帮助。

— 住友
source