有没有办法将动画 GIF 添加到 Markdown 文件中？

Question

我想将此动画 GIF 添加到 GitHub 风格的 Markdown 文件中。如果在 GitHub 中无法完成，是否可以在其他版本的 Markdown 中完成？

Answer 1

显示 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" />

产量：

Answer 2

来自 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"

内嵌式：

参考风格：

---

或者您可以直接使用网址:

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

Answer 3

1. 有gif文件。
2. 将 gif 文件推送到您的 github 存储库
3. 单击 github 存储库上的该文件即可获取 gif 的 github 地址
4. 在你的自述文件中：

   ![alt-text](link)

下面的例子：

![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)

Answer 4

只需将

.gif

文件上传到 GitHub 的基本文件夹并编辑

README.md

只需使用此代码

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

Answer 5

从本地上传：

1. 将 .gif 文件添加到 Github 存储库的根目录并推送更改。
2. 转到 README.md
3. 添加这个

   ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)

4. 应该可以看到提交和 gif。

使用 url 显示 gif：

5. 转到 README.md
6. 按此格式添加

   ![Alt text](https://sample/url/name-of-gif-file.gif)

7. 应该可以看到提交和 gif。

希望这有帮助。

Answer 6

Giphy 陷阱

遵循上面列出的 2 个要求（必须以

.gif

结尾并使用图像语法）后，如果您在使用 giphy 中的 gif 时遇到问题：

确保您有正确的 giphy 网址！ 您不能只将

.gif

添加到此末尾并使其起作用。

如果您只是从浏览器复制网址，您会得到类似以下内容：

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

您需要点击“复制链接”，然后专门获取“GIF 链接”。请注意正确的指向

media.giphy.com

而不是仅指向

giphy.com

：

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

Answer 7

另一种更简单的方法是在浏览器（chrome）中打开你的git存储库，点击编辑README.md

然后只需从本地计算机磁盘拖放您的 gif/png/jpeg 文件，文件就会自动上传，链接将放置在 README.md 文件中，如下所示

![myfile](https://user-images.githubusercontent.com/52455330/139071980-91302a8a-37b1-4196-803e-f91b1de2ee5b.gif)

您要添加的文件

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

Answer 8

使用 HTML 的 img 标签，然后给出源网址。

<img src="https://...thumbs-up.gif">

Answer 9

如果您可以提供 SVG 格式的图像（它是一个图标而不是照片），则可以使用 SVG SMIL 动画对其进行动画处理，并且 SVG 绝对是 GIF 图像（甚至其他格式）的最佳替代品。

SVG 与其他图像格式一样，可以与标准标记或 HTML

<img>

元素一起使用：

![image description](path/in/repository/to/image.svg)

<img src="path/in/repository/to/image.svg" width="128"/>

Answer 10

您可以使用！[ ]（任意图片链接）

我还建议使用 https://stackedit.io/ 进行 Markdown 格式化，并且比记住所有 Markdown 语法要容易得多

Answer 11

除了上面的所有答案：

如果您想为您的 github 存储库 README.md 使用 gif 并且不想从根目录寻址它，仅复制浏览器的 url 是不够的，例如您的浏览器 URL 是 sth喜欢：

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

但是你应该在你的 github 帐户中打开你的 gif 并右键单击它，然后单击

copy image address

或类似这样的东西：

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

Answer 12

转换网址

https://github.com/nikhith265/submit_button_group/blob/master/attachments/gif/sample_gif.gif

到

https://raw.githubusercontent.com/nikhith265/submit_button_group/298c26b5a3fcfe936f16deef0e8712c2fdc1b635/attachments/gif/sample_gif.gif

注意：确保从 url 中删除 /blob

然后使用img标签如下将gif添加到.md

<img src="https://raw.githubusercontent.com/nikhith265/submit_button_group/298c26b5a3fcfe936f16deef0e8712c2fdc1b635/attachments/gif/sample_gif.gif" alt="gif" width="300" height="540">

Answer 13

我发现将 gif 添加到 markdown 文件的最简单方法就是复制/粘贴。 几乎大多数 Microsoft 网站（例如 GitHub、Stack Overflow）都支持复制/粘贴图像和 gif。

如果您的计算机中有该文件，则复制该文件并粘贴到任何 Markdown 文件中，它将自动添加并上传到 GitHub 的服务器，并使用文件名以正确的格式进行格式化。