¿Cómo agregar capturas de pantalla a README en el repositorio de github?


595

¿Es posible colocar una captura de pantalla en el archivo README en un repositorio de GitHub? ¿Cuál es la sintaxis?


1
La solución correcta para esto es usar referencias relativas, según esta respuesta stackoverflow.com/a/11916467/1633251 (vea el comentario con el enlace a un nuevo documento de github sobre cómo hacerlo). La respuesta corta es usar[Read more words!](docs/more_words.md)
David H

2
La mayoría de las soluciones proponen señalar el repositorio en sí. ¿Qué pasa si desea evitar los archivos binarios en el repositorio (incluso en una rama separada, como se propuso) y desea almacenarlo en un lugar externo? ¿Alguna buena práctica? ¿Un gist tal vez (IDK si gist puede ser binario o solo texto)? creando otro repositorio "myproject-assets" para el proyecto "myproject"? ¿Hay algún lugar de imagen popular externo similar al estándar de facto de YouTube para subir videos?
Xavi Montero


Respuestas:


852

Si usa Markdown (README.md):

Siempre que tenga la imagen en su repositorio, puede usar una URL relativa:

![Alt text](/relative/path/to/img.jpg?raw=true "Optional Title")

Si necesita incrustar una imagen alojada en otro lugar, puede usar una URL completa

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub recomienda que utilice enlaces relativos con el ?raw=trueparámetro para garantizar que los repositorios se bifurquen correctamente.

El raw=trueparámetro está allí para garantizar que la imagen a la que se vincula se muestre tal cual. Eso significa que solo se vinculará la imagen, no toda la interfaz de GitHub para ese archivo respectivo. Vea este comentario para más detalles.

Vea un ejemplo: https://raw.github.com/altercation/solarized/master/README.md

Si utiliza IVS entonces usted tendrá que establecer el atributo esterilice a trueasí: ?raw=true&sanitize=true. (Gracias @EliSherer)

Además, la documentación sobre enlaces relativos en archivos README: https://help.github.com/articles/relative-links-in-readmes

Y, por supuesto, los documentos de rebajas: http://daringfireball.net/projects/markdown/syntax

Además, si crea una nueva rama screenshotspara almacenar las imágenes, puede evitar que estén en el masterárbol de trabajo

Luego puede incrustarlos usando:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

1
Bueno, agregué los documentos oficiales en los enlaces relativos, pero no puedo encontrar algún repositorio que los use, si tiene sugerencias, estaré encantado de ayudarlo, ya que todo el asunto es ayudar a más personas, no permanecer en el alcance (Mi error aquí).
Paul

2
@Paul, ¡aquí hay un repositorio de ejemplo que hace exactamente eso! github.com/Tarrasch/zsh-bd
Tarrasch

44
github.com/altercation/solarized es la versión representada del ejemplo anterior, en caso de que ayude a alguien.
barrycarter

3
Cuando dices /relative/path/to/img.jpg, ¿no es ese un camino absoluto debido a la barra diagonal?
jww

1
@kelvin, el raw=trueparámetro está ahí para representar la imagen a la que apunta la ruta de GitHub, no la interfaz de GitHub. Pruebe y vea la diferencia: github.com/altercation/solarized/blob/master/img/… vs github.com/altercation/solarized/blob/master/img/… . La primera URL le mostrará la interfaz de GitHub y la imagen, mientras que la segunda solo le mostrará la imagen. Los enlaces relativos siguen siendo útiles al clonar / bifurcar repositorios, por lo que sí, debe usar rutas relativas con ese parámetro, pero son dos conceptos diferentes.
Paul

70

Aunque ya hay una respuesta aceptada, me gustaría agregar otra forma de cargar imágenes para leerme en GitHub.

  • Debes crear un problema en tu repositorio
  • Arrastra y suelta en el área de comentarios tu imagen
  • Después de generar el enlace para la imagen, insértelo en el archivo Léame

Más detalles puedes encontrar aquí


66
Me interesa cuánto tiempo vivirán las imágenes cargadas de esta manera. ¿Github realiza la limpieza de algunas imágenes? Como, "si esta imagen no hace referencia a ningún problema de Github, puedo eliminarla con seguridad" ...
artin

1
@Artin probablemente solo cuando el problema se elimine por completo. Temas cerrados se quedan para siempre, ya que desempeñan un papel muy importante en la documentación y depuración
andrhamm

55

Descubrí que la ruta a la imagen en mi repositorio no era suficiente, tenía que vincular a la imagen en el raw.github.comsubdominio.

Formato de URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Ejemplo de descuento ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)


44
Votando a favor de esto debido al comentario de @sorens sobre la respuesta aceptada. Es malo especificar un baño absoluto ya que no funcionará bien en repositorios bifurcados. (O si cambia el nombre de su repositorio, o si github cambia el nombre de dominio, etc., etc.)
Linus Unnebäck

77
@ LinusUnnebäck: Hay una buena razón para usar rutas absolutas en mi humilde opinión: si el readme.md también se usa en otros lugares, por ejemplo, como una página principal de Doxygen. Los enlaces relativos no funcionarán entonces.
Ela782

1
@ Ela782 aunque, en una nota adicional, eso no debería ser un problema para el software que está extrayendo archivos README específicamente de GitHub ; dicho software debe saber resolver adecuadamente las URL relativas. npm hace , por ejemplo.
Mark Amery el

¿Cómo vincular a la imagen en el raw.github.comsubdominio? ¿Dónde cargar el archivo de imagen?
Saif

@Saif raw.github.com es solo un reflejo de lo que está comprometido con su repositorio de github. Simplemente envíe la imagen a su repositorio y siga el formato de URL especificado.


21

Una línea a continuación debe ser lo que buscas

si su archivo está en el repositorio

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

si su archivo está en otra url externa

![ScreenShot](https://{url})

2
sugiera usar el enlace relativo del archivo de imagen, vea Enlaces relativos en READMEs - Ayuda de Github
shaobin0604

2
-1 por la razón dada por @ shaobin0604; los documentos oficiales recomiendan usar enlaces relativos al vincular a un archivo en su propio repositorio, de modo que el enlace apunte al lugar correcto cuando se bifurca.
Mark Amery el

17

La sintaxis de reducción para mostrar imágenes es:

![image](https://{url})

PERO: ¿Cómo proporcionar el url?

  • Probablemente no desee saturar su repositorio con capturas de pantalla, no tienen nada que ver con el código
  • es posible que no desee lidiar con la molestia de hacer que su imagen esté disponible en la web ... (cárguela en un servidor ...).

Entonces ... puedes usar este increíble truco para hacer que github aloje tu archivo de imagen. TDLR:

  1. crear un problema en la lista de problemas de su repositorio
  2. arrastre y suelte su captura de pantalla sobre este problema
  3. copie el código de descuento que github acaba de crear para que pueda mostrar su imagen
  4. pégalo en tu archivo Léame (o donde quieras)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/


7

Mucho más simple que agregar URL Simplemente cargue una imagen en el mismo repositorio, como:

![Screenshot](screenshot.png)


7

agregue esto a README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>

4

Reducción: ![Screenshot](http://url/to/img.png)

  • Crea un problema relacionado con la adición de imágenes
  • Agregue la imagen arrastrando y soltando o seleccionando un archivo
  • Luego copie la fuente de la imagen

  • Ahora agregue ![Screenshot](http://url/to/img.png)a su archivo README.md

¡Hecho!

Alternativamente, puede usar algún sitio de alojamiento de imágenes como imgury obtener su url y agregarlo en su archivo README.md o también puede usar algún alojamiento de archivo estático.

Problema de muestra


Lo hice hace mucho tiempo, ahora las imágenes no están disponibles. Entonces no recomiendo esto.
Namek

Siempre puede usar imgur o alguna imagen personalizada cdn en ese caso :)
abe312

4

Método 1-> Modo de reducción

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Método 2-> forma HTML

<img src="https://link(format same as above)" width="100" height="100"/>

o

<img src="https://link" style=" width:100px ; height:100px " />

Nota -> Si no quieres darle estilo a tu imagen, es decir, cambiar el tamaño, elimina la parte de estilo


1

Primero, cree un directorio (carpeta) en la raíz de su repositorio local que contendrá el screenshotsque desea agregar. Llamemos al nombre de este directorio screenshots. Coloque las imágenes (JPEG, PNG, GIF, `etc.) que desea agregar a este directorio.

Captura de pantalla de Android Studio Workspace

En segundo lugar, debe agregar un enlace a cada imagen en su archivo README. Entonces, si tengo imágenes nombradas 1_ArtistsActivity.pngy 2_AlbumsActivity.pngen mi directorio de capturas de pantalla, agregaré sus enlaces de esta manera:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

Si desea cada captura de pantalla en una línea separada, escriba sus enlaces en líneas separadas. Sin embargo, es mejor si escribe todos los enlaces en una línea, separados solo por espacio. Puede que en realidad no se vea muy bien, pero al hacerlo, GitHub los organiza automáticamente para usted.

Finalmente, confirma tus cambios y empújalo.


1

Busqué en Google algunas preguntas similares y no vi ninguna respuesta con mi problema y es una solución bastante simple / fácil.

Google Cloud Storage: un enfoque ligeramente diferente de las imágenes en README

Aquí va: al igual que el OP, quería una imagen en mi README de Github y, conociendo la sintaxis de Markdown para hacerlo, la escribí:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

Debe completar las sustituciones reales anteriores (por ejemplo, MY_IMAGE = image.jpg) para que esto funcione.

Pero, espera ... fracaso: ¡no hay una foto renderizada real! ¡Y el enlace es exactamente como lo proporciona Google Storage!

captura de pantalla de la carga fallida de imágenes de Github

Github camo- Imágenes anónimas

Github aloja tus imágenes de forma anónima , ¡sí! Sin embargo, esto presenta un problema para los activos de almacenamiento de Google. Debe obtener la URL generada de su Google Cloud Console.

Estoy seguro de que hay una manera más fluida, sin embargo, simplemente visite el punto final de su URL y copie la URL larga. Detalles:

Instrucciones

  1. Visite su consola de almacenamiento: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
  2. Haga clic en la imagen que desea mostrar en Github (aparece la página "Detalles del objeto")
  3. Copie la pasta de esa URL (la que comienza con httpsno gs) en una nueva pestaña / ventana del navegador
  4. Copie la nueva URL generada, debería ser más larga, desde la nueva pestaña / ventana del navegador en su archivo README de Github

Esperemos que esto ayude a acelerar y aclarar este problema para cualquier otra persona.


FYI: parece que algo está cambiando en el lado de Google o Github. He tenido algunas imágenes en README que fallaron a través de este método, y algunas estaban funcionando a partir de la tarde del 28 de marzo de 2020. ¡YMMV aquí!
Jason R Stevens CFA

0

Para mí, la mejor manera es ...

  1. Cree un nuevo problema con ese repositorio en github y luego cargue el archivo en formato gif. Para convertir archivos de video a formato gif, puede usar este sitio web http://www.online-convert.com/
  2. Envíe el problema recién creado.
  3. Copie la dirección del archivo cargado
  4. Finalmente en su archivo README poner! [Demo] (DIRECCIÓN COPIADA)

Espero que esto ayude.


¿En qué se diferencia de stackoverflow.com/a/32252663/1570104 ?
Edelans

0

Agregue la imagen en el repositorio desde la opción de cargar el archivo y luego en el archivo README

![Alt text]("enter image url of repositoryhere") 

-5

Con las imágenes ubicadas en el /screen-shotsdirectorio. El exterior <div>permite posicionar las imágenes. El relleno se logra usando <img width="desired-padding" height="0">.

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>

1
Por mi vida, no pude imaginar centrar una imagen en el archivo README, que contiene tu respuesta, ¡así que gracias!
Cody Reichert

Esta respuesta me pareció útil, ya que le permite establecer las dimensiones de la imagen
Stanley
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.