มีวิธีเพิ่ม gif ในไฟล์ Markdown หรือไม่?


229

ฉันต้องการเพิ่มgifนี้ไปยังไฟล์ markdown ปรุงแต่ง GitHub หากไม่สามารถทำได้ใน GitHub เป็นไปได้ไหมที่จะทำใน markdown รุ่นอื่น?


คำตอบ:


485

การแสดง gif ต้องการสองสิ่ง

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 จริง !! นี่เป็นคำถามทางเทคนิค
— เลด Annajar

6
เด็กคนนั้นกระแทกหัวของเขาอย่างแรง ยากเกินไปบนพื้นกระเบื้องและส่วนใหญ่ได้รับความเสียหายของสมองหรืออย่างน้อยก็เกิดการสั่นสะเทือนอย่างรุนแรง ตามจริงแล้วฉันจะลบออกเมื่อฉันเห็นว่าไม่เหมาะสมและแทนที่ด้วยสิ่งที่ดีกว่า
— eduncan911

3
โปรดทราบว่าหาก gif ของคุณใหญ่เกินไปคุณจะเห็นกล่องภาพที่ไม่ดี GIFs ขนาดเล็กจะทำงานได้ดี
— Shubham Chaudhary

1
ฉันเพิ่งโหวตคำตอบไม่เพียงเพราะมันถูกต้อง แต่เป็นเพราะทุกคนรักลูกแมว! :)
— MilitelloVinx

2
@Gati ฉันไม่รู้ ฉันคิดว่าคุณต้องสร้างคำถามใหม่สำหรับสิ่งนั้น
— Khaled Annajar

102

จากMarkdown Cheatsheet :

คุณสามารถเพิ่มลงใน repo ของคุณและอ้างอิงด้วยแท็กรูปภาพ:

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"

Inline สไตล์: ข้อความแสดงแทน

อ้างอิงสไตล์: ข้อความแสดงแทน


หรือคุณสามารถใช้URL โดยตรง :

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

@erip วิธีใช้ gifs จาก Giphy?
— AbhimanyuAryan

1
@AbhimanyuAryan คุณสามารถค้นหาที่อยู่ของ gif เหล่านั้นได้โดยคลิกขวาที่พวกเขาและรับที่อยู่ ตัวอย่างเช่น: media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif
— erip

Gif (และภาพอื่น ๆ ที่ฉันเชื่อ) เชื่อมโยงกับไฟล์ markdown ใน github, รับบริการโดยcamoด้วยขีด จำกัด ไฟล์ 5MB
— 0xcaff

11
  1. มีไฟล์ gif
  2. ผลักดันไฟล์ gif ไปยัง repo GitHub ของคุณ
  3. คลิกที่ไฟล์นั้นบน repo Github เพื่อรับที่อยู่ Github ของ gif
  4. ในไฟล์ README ของคุณ: ![alt-text](link)

ตัวอย่างด้านล่าง: ![grab-landing-page](https://github.com/winnie1312/grab/blob/master/grab-landingpage-winnie.gif)


7
ง่ายกว่าที่จะวางไว้ในไดเรกทอรี repo เช่น/imgนั้นใช้![alt text](img/my-image.png)
— Braden Best

7

Giphy Gotcha

หลังจากทำตามข้อกำหนด 2 ข้อที่ระบุไว้ด้านบน (ต้องสิ้นสุด.gifและใช้ไวยากรณ์รูปภาพ) หากคุณมีปัญหากับ gif จาก giphy:

ให้แน่ใจว่าคุณมี URL ที่ 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


3

เพียงอัปโหลด.gifไฟล์ไปยังโฟลเดอร์ฐานของ GitHub และแก้ไขREADME.mdเพียงใช้รหัสนี้

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


0

นอกจากคำตอบทั้งหมดด้านบน:

หากคุณต้องการใช้ gif สำหรับที่เก็บ github ของคุณ README.md และไม่ต้องการใช้จาก root ของคุณก็ไม่เพียงพอหากคุณเพิ่งคัดลอก url ของเบราว์เซอร์ของคุณตัวอย่างเช่น URL ของเบราว์เซอร์ของคุณคือ:

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

แต่คุณควรเปิด gif ของคุณในบัญชี github ของคุณและคลิกที่มันและคลิก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

แสดง gif โดยใช้ url:

  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.