Markdownファイルにgifを追加する方法はありますか?


229

このgifをGitHubフレーバーマークダウンファイルに追加したいと思います。GitHubで実行できない場合、別のバージョンのmarkdownで実行できますか?


回答:


485

gifを表示するには2つのものが必要です

1- これらの例のようにこの構文を使用します

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

収量:

代替テキスト

2-画像のURLはgifで終わる必要があります

3-後世のために:上記の.gifリンクがうまくいかない場合、画像は表示されず、代わりに次のような代替テキストとURLが表示されます。

代替テキスト

4- GIFのサイズを変更するには、このGithubチュートリアルリンクのように、この構文を使用できます

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

収量:


3
本当に@NikKov !! これは技術的な質問です。
Khaled Annajar 2017年

6
その子供は本当に頭を強く叩きました。タイル張りの床では硬すぎ、おそらく脳の損傷または少なくとも深刻な脳震とうを起こしました。実際には、不快だと思うので削除し、より良いものに置き換えます。
eduncan911 2017

3
GIFが大きすぎると、画像ボックスが不良になることに注意してください。小さいgifでも問題なく機能します。
Shubham Chaudhary

1
正解であるだけでなく、誰もが子猫を愛しているからです。:)
MilitelloVinx

2
@Gatiわからない。そのために新しい質問を作成する必要があると思います。
Khaled Annajar

102

マークダウンのチートシートから:

これをリポジトリに追加して、イメージタグで参照できます。

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)

@erip Giphyからのgifの使用方法
AbhimanyuAryan

1
@AbhimanyuAryanそれらを右クリックしてアドレスを取得すると、それらのgifのアドレスを見つけることができます。例:media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif
erip

githubの上の値下げファイルにリンクされている(私は信じているし、他の画像)GIFが、によって提供を受ける迷彩 5メガバイトのファイル制限で。
0xcaff 2016

11
  1. gifファイルがあります。
  2. GitHubリポジトリにGIFファイルをプッシュする
  3. githubリポジトリのそのファイルをクリックして、gifのgithubアドレスを取得します
  4. READMEファイル: ![alt-text](link)

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


7
のようにリポジトリディレクトリに配置して/img使用する方が簡単です![alt text](img/my-image.png)
Braden Best

7

ギフィー・ゴッチャ

上記の2つの要件を満たした後( .gif画像構文を使用するます)、giphyのgifで問題が発生した場合:

正しいgiphy URLがあることを確認してください!これの最後に追加.gifするだけでは機能しません。

ブラウザからURLをコピーするだけの場合、次のようになります。

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

代わりに「リンクをコピー」をクリックして、「GIFリンク」を具体的に取得する必要があります。正しい1つmedia.giphy.comが単にではなく指すことを確認しますgiphy.com

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


3

.gifGitHubのベースフォルダーにファイルをアップロードし、README.mdこのコードを使用して編集するだけです

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


0

上記のすべての回答に加えて:

githubリポジトリのREADME.mdにgif を使用し、それをrootから使用したくない場合は、ブラウザのURLをコピーするだけでは不十分です。たとえば、ブラウザのURLは次のようになります。

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

しかし、あなたはあなたのgithubアカウントであなたのgifを開いて、それをrihgtクリックして、次のcopy image addressようなsth であるようなクリックまたはsthすべきです:

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


0

ローカルからアップロード:

  1. .gifファイルをGithubリポジトリのルートに追加し、変更をプッシュします。
  2. README.mdに移動します
  3. これを追加 ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
  4. コミットとgifが見えるはずです。

URLを使用してGIFを表示します。

  1. README.mdに移動します
  2. この形式で追加 ![Alt text](https://sample/url/name-of-gif-file.gif)
  3. コミットとgifが見えるはずです。

お役に立てれば。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.