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

229

Quiero agregar este gif a un archivo de descuento con sabor de GitHub. Si no se puede hacer en GitHub, ¿es posible hacerlo en otra versión de Markdown?

markdown gif github-flavored-markdown

— Zaynaib Giwa
fuente

Posible duplicado de Cómo agregar capturas de pantalla a README en el repositorio de github? o Agregar imágenes a README.md en github

— Michael Recachinas

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

tener archivo gif.
empuje el archivo gif a su repositorio de github
haga clic en ese archivo en el repositorio de github para obtener la dirección de github del gif
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:

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

Mostrar el gif usando url:

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

Espero que esto ayude.

— Sumit
fuente