¿Hay alguna manera de agregar un gif a un archivo Markdown?

Respuestas:

485

Mostrar gifs necesita dos cosas

1- Use esta sintaxis como en estos ejemplos

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

Rendimientos:

Texto alternativo

2- La url de la imagen debe terminar con gif

3- Para la posteridad: si el enlace .gif anterior alguna vez sale mal, no verá la imagen y en su lugar verá el texto alternativo y la URL, de esta manera:

Texto alternativo

4- para cambiar el tamaño del gif puedes usar esta sintaxis como en este enlace tutorial de Github

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

Rendimientos:

Khaled Annajar
fuente
3
@NikKov de verdad !! Esta es una pregunta técnica.
Khaled Annajar
66
Ese niño realmente se golpeó la cabeza con fuerza. Demasiado duro en un piso de baldosas y muy probablemente recibió daño cerebral o al menos una conmoción cerebral grave. De hecho, voy a eliminarlo, ya que lo considero ofensivo, y reemplazarlo con algo más agradable.
eduncan911
3
Tenga en cuenta que si su gif es demasiado grande, verá un cuadro de mala imagen. Los gifs más pequeños funcionarán bien.
Shubham Chaudhary
1
¡Acabo de votar por la respuesta no solo porque es correcta, sino porque todos aman al gatito! :)
MilitelloVinx
2
@Gati, no lo sé. Creo que necesitas crear una nueva pregunta para eso.
Khaled Annajar
102

De la hoja de trucos de Markdown :

Puede agregarlo a su repositorio y hacer referencia a él con una etiqueta de imagen:

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"

Estilo en línea: texto alternativo

Estilo de referencia: texto alternativo

Alternativamente, puede utilizar la dirección URL directamente :

![](http://www.reactiongifs.us/wp-content/uploads/2013/10/nuh_uh_conan_obrien.gif)
erip
fuente
@erip ¿cómo usar gifs de Giphy?
AbhimanyuAryan
1
@AbhimanyuAryan Puedes encontrar la dirección de esos gifs haciendo clic derecho sobre ellos y obteniendo la dirección. Por ejemplo: media.giphy.com/media/MoYC1N4nv7Fcs/giphy.gif
erip
Los gifs (y otras imágenes que creo) vinculados a archivos de descuento en github, reciben servicio de camuflaje con un límite de archivo de 5 MB.
0xcaff
11
  1. tener archivo gif.
  2. empuje el archivo gif a su repositorio de github
  3. haga clic en ese archivo en el repositorio de github para obtener la dirección de github del gif
  4. en su archivo README: ![alt-text](link)

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

Winnie Phan
fuente
77
Es más fácil ponerlo en un directorio de repositorios como /imgy luego usarlo![alt text](img/my-image.png)
Braden Best
7

Giphy Gotcha

Después de seguir los 2 requisitos enumerados anteriormente (debe terminar .gify usar la sintaxis de la imagen), si tiene problemas con un gif de giphy:

¡Asegúrese de tener la URL giphy correcta! No puede simplemente agregar .gifal final de este y hacer que funcione.

Si solo copia la url desde un navegador, obtendrá algo como:

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

En su lugar, debe hacer clic en "Copiar enlace" y luego tomar el "Enlace GIF" específicamente. Observe los puntos correctos en media.giphy.comlugar de solo giphy.com:

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

Jordan Arnesen
fuente
3

simplemente cargue el .gifarchivo en su carpeta base de GitHub y edite README.mdsolo use este código

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

Vishal Shelake
fuente
0

Además de todas las respuestas anteriores:

si desea usar un gif para su repositorio de github README.md y no quiere usarlo desde su raíz , no es suficiente si solo copia la url de su navegador, por ejemplo, la URL de su navegador es algo así como:

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

pero debe abrir su gif en su cuenta de github y hacer clic en él y hacer clic copy image addresso algo así, que es algo así:

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

ashkan nasirzadeh
fuente
0

Subir desde local:

  1. Agregue su archivo .gif a la raíz del repositorio de Github y presione el cambio.
  2. Vaya a README.md
  3. Agrega esto ![Alt text](name-of-gif-file.gif) / ![](name-of-gif-file.gif)
  4. Comprometerse y gif deben ser vistos.

Mostrar el gif usando url:

  1. Vaya a README.md
  2. Agregar en este formato ![Alt text](https://sample/url/name-of-gif-file.gif)
  3. Comprometerse y gif deben ser vistos.

Espero que esto ayude.

Sumit
fuente