tutorial link examples code git github markdown github-flavored-markdown readme

link - Añade imágenes a README.md en GitHub



readme.md format (23)

Recientemente me uní a GitHub . He alojado algunos proyectos allí.

Necesito incluir algunas imágenes en mi archivo README. No sé cómo hacer eso.

Busqué sobre esto, pero todo lo que obtuve fueron algunos enlaces que me decían "alojar imágenes en la web y especificar la ruta de la imagen en el archivo README.md".

¿Hay alguna forma de hacer esto sin alojar las imágenes en servicios de alojamiento web de terceros?

Necesito incluir algunas imágenes en mi archivo README. No sé cómo hacer eso.

ReadmeGalleryCreatorForGitHub un pequeño asistente que le permite crear y personalizar galerías de imágenes simples para el ReadmeGalleryCreatorForGitHub léame de su repositorio de GitHub: vea ReadmeGalleryCreatorForGitHub .

El asistente aprovecha el hecho de que GitHub permite que las etiquetas img ocurran en README.md . Además, el asistente hace uso del popular truco de subir imágenes a GitHub al arrastrarlas y soltarlas en el área de problemas (como ya se mencionó en una de las respuestas de este hilo).

Es mucho más simple que eso.

Simplemente cargue su imagen en la raíz del repositorio, y vincule al nombre de archivo sin ninguna ruta, así:

![Screenshot](screenshot.png)

Sintaxis basica

![myimage-alt-tag](url-to-image)

Aquí:

  1. my-image-alt-tag: texto que se mostrará si no se muestra la imagen.
  2. url-to-image: cualquiera que sea su recurso de imagen. URI de la imagen

Ejemplo:

![](http://lmsotfy.com/so.png)

Esto se verá como el siguiente:

ÚLTIMO

Los wikis pueden mostrar imágenes PNG, JPEG o GIF

Ahora puedes usar:

[[https://github.com/username/repository/blob/master/img/octocat.png|alt=octocat]]

-O-

Sigue estos pasos:

  1. En GitHub, navegue a la página principal del repositorio.

  2. Bajo el nombre de su repositorio, haga clic en Wiki.

  3. Usando la barra lateral de wiki, navegue a la página que desea cambiar y luego haga clic en Editar.

  4. En la barra de herramientas wiki, haga clic en Imagen .

  5. En el cuadro de diálogo "Insertar imagen", escriba la URL de la imagen y el texto alternativo (que utilizan los motores de búsqueda y los lectores de pantalla).
  6. Haga clic en Aceptar.

Consulte los Docs .

Considere usar una table si agrega varias capturas de pantalla y desea alinearlas usando datos tabulares para mejorar la accesibilidad como se muestra aquí:

Si su analizador de rebajas lo admite, también puede agregar el atributo WIA-ARIA role="presentation" al elemento TABLE y omitir las etiquetas th .

En caso de que necesite subir algunas fotos para documentación, un buen enfoque es usar git-lfs . Suponiendo que haya instalado los git-lfs siga estos pasos:

  1. Intialize git lfs para cada tipo de imagen:

    git lfs *.png git lfs *.svg git lfs *.gif git lfs *.jpg git lfs *.jpeg

  2. Cree una carpeta que se utilizará como ubicación de la imagen, por ejemplo. doc . En sistemas basados ​​en GNU / Linux y Unix, esto se puede hacer a través de:

    cd project_folder mkdir doc git add doc

  3. Copia pegar cualquier imagen en la carpeta doc. Después, agrégalos a través git add comando git add .

  4. Comprometerse y empujar.

  5. Las imágenes están disponibles públicamente en la siguiente url:

    https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location en el repo ^

Donde: * ^github_username^ es el nombre de usuario en github (lo puede encontrar en la página del perfil) * ^repo_name^ es el nombre del repositorio * ^branch^ es la rama del repositorio donde se carga la imagen * ^image_location in the repo^ es la ubicación incluyendo la carpeta en la que está almacenada la imagen.

También puedes subir la imagen primero, luego visitar la ubicación en la página de github de tus proyectos y navegar hasta encontrar la imagen, luego presionar el botón de download y luego copiar y pegar la URL desde la barra de direcciones del navegador.

Mira this desde mi proyecto como referencia.

Luego, puede usar la url para incluirlos usando la sintaxis de reducción mencionada anteriormente:

![some alternate text that describes the image](^github generated url from git lfs^)

Por ejemplo: supongamos que usamos esta foto. Luego puede usar la sintaxis de reducción de marca:

![In what order to compile the files](https://media.githubusercontent.com/media/pc-magas/myFirstEnclave/master/doc/SGX%20Compile%20workflow.png)

En mi caso, quería mostrar una pantalla de impresión en Github pero también en NPM . A pesar de que el uso del camino relativo funcionaba dentro de Github , no funcionaba fuera de él. Básicamente, incluso si presioné mi proyecto a NPM también (que simplemente usa el mismo readme.md , la imagen nunca se mostraba).

Lo intenté de varias maneras, al final esto fue lo que funcionó para mí:

![Preview](https://raw.githubusercontent.com/username/project/master/image-path/image.png)

Ahora veo mi imagen correctamente en NPM o en cualquier otro lugar donde pueda publicar mi paquete.

En mi caso, uso imgur y uso el enlace directo de esta manera.

![img](http://i.imgur.com/yourfilename.png)

He resuelto este problema. Solo necesitas referirte al archivo readme de otra persona.

¡Al principio, debes subir un archivo de imagen a la biblioteca de códigos github! A continuación, referencia directa a la dirección del archivo de imagen.



Muchas de las soluciones publicadas son incompletas o no a mi gusto.

  • Un CDN externo como imgur agrega otra herramienta a la cadena. Meh
  • Crear un problema ficticio en el rastreador de problemas es un hack. Crea desorden y confunde a los usuarios. Es un dolor migrar esta solución a un fork o fuera de GitHub.
  • Usar la rama gh-pages hace que las URL sean frágiles. Es posible que otra persona que trabaja en el proyecto que mantiene la página gh no sepa algo externo depende del camino a estas imágenes. La rama gh-pages tiene un comportamiento particular en GitHub que no es necesario para alojar imágenes CDN.
  • El seguimiento de los activos en el control de versiones es una buena cosa. A medida que un proyecto crece y cambia, es una forma más sostenible de gestionar y hacer un seguimiento de los cambios realizados por múltiples usuarios.
  • Si una imagen se aplica a una revisión específica del software, puede ser preferible vincular una imagen inmutable. De esa manera, si la imagen se actualiza posteriormente para reflejar los cambios en el software, cualquier persona que lea el archivo Léame de la revisión encontrará la imagen correcta.

Mi solución preferida, inspirada en esta esencia , es usar una rama de activos con enlaces permanentes a revisiones específicas .

git checkout --orphan assets git reset --hard cp /path/to/cat.png . git add . git commit -m ''Added cat picture'' git push -u origin assets git rev-parse HEAD # Print the SHA, which is needed below.

Construya un "enlace permanente" a esta revisión de la imagen y envuélvalo en Markdown:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/{sha}/cat.png)

p.ej

![Cat](https://raw.githubusercontent.com/paulmelnikow/zsh-startup-timer/3923c60fc66d4223ccf063d169ccf2ff167b1270/cat.png)

Para mostrar siempre la última imagen en la rama de activos, use assets en lugar de sha:

![Cat](https://raw.githubusercontent.com/{user}/{repo}/assets/cat.png)

Podemos hacer esto simplemente,

  • crear un nuevo número en GitHub
  • Imágenes de arrastrar y soltar en el cuerpo div de Issue

Después de unos segundos, se generará un enlace. Ahora, copie el enlace o la URL de la imagen y utilícelo en cualquier plataforma compatible.

Por lo general, alojo la imagen en el sitio, esto puede vincular a cualquier imagen alojada. Solo tira esto en el readme. Funciona para archivos .md , no estoy seguro acerca de .md

.. image:: https://url/path/to/image :height: 100px :width: 200 px :scale: 50 %

Prueba este markdown:

![alt text](http://url/to/img.png)

Creo que puede enlazar directamente a la versión en bruto de una imagen si está almacenada en su repositorio. es decir

![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Edición: acabo de notar un comentario que vincula al artículo que sugiere el uso de páginas gh. Además, los enlaces relativos pueden ser una mejor idea que las URL absolutas que publiqué anteriormente.

Puede enlazar a imágenes en su proyecto desde README.md (o externamente) usando el enlace alternativo de CDN de github.

La URL se verá así:

https://cdn.rawgit.com/<USER>/<REPO>/<BRANCH>/<PATH>/<TO>/<FILE>

Tengo una imagen SVG en mi proyecto, y cuando la referencia en mi documentación de proyecto de Python, no se procesa.

Enlace del proyecto

Aquí está el enlace del proyecto al archivo (no se representa como una imagen):

https://github.com/jongracecox/anybadge/blob/master/examples/awesomeness.svg

Ejemplo de imagen incrustada:

Enlace crudo

Aquí está el enlace RAW al archivo (aún no se representa como una imagen):

https://raw.githubusercontent.com/jongracecox/anybadge/master/examples/awesomeness.svg

Ejemplo de imagen incrustada:

Enlace CDN

Usando el enlace CDN, puedo vincular al archivo usando (se representa como una imagen):

https://cdn.rawgit.com/jongracecox/anybadge/master/examples/awesomeness.svg

Ejemplo de imagen incrustada:

Así es como puedo usar imágenes de mi proyecto tanto en mi archivo README.md como en mi proyecto PyPi reStructredText doucmentation ( here )

Quería actualizar esto usando ZenHub, ya que GitHub y ZenHub han cambiado sus diseños gráficos.

Si instala ZenHub y permite el acceso a su GitHub, puede navegar a la pestaña ZenHub una vez en su repositorio y abrir un nuevo problema.

Esta es una versión actualizada del video de YouTube de .

Paso 1:

Paso 2: Desde allí puedes abrir un archivo adjunto.

Paso 3: Y desde allí puedes utilizar el enlace generado automáticamente. De esta manera, no tiene que preocuparse por crear un nuevo repositorio solo para imágenes.

Luego use la sintaxis estándar de MarkDown con la URL proporcionada.

Etapa 4

![alt text](image URL from ZenHub issue)

Paso 5 No olvide cerrar el borrador del problema y no enviarlo realmente. La URL de la imagen todavía debería funcionar correctamente!

Simplemente agregue una etiqueta <img> a su README.md con un src relativo a su repositorio. Si no está usando un src relativo, asegúrese de que el servidor admita CORS.

Funciona porque GitHub soporta inline-html

<img src="/docs/logo.png" alt="My cool logo"/> # My cool project and above is the logo of it

Observar here

Solo estoy extendiendo o agregando un ejemplo a la respuesta ya aceptada.

Una vez que hayas puesto la imagen en tu repositorio de Github.

Entonces:

  • Abra el repositorio de Github correspondiente en su navegador.
  • Navegue hasta el archivo de imagen de destino. Luego, solo abra la imagen en una nueva pestaña.
  • Copiar la url
  • ¡Y finalmente inserte la url en el siguiente patrón ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

En mi caso es

![In a single picture](https://raw.githubusercontent.com/shadmazumder/Xcode/master/InOnePicture.png)

Dónde

  • shadmazumder es mi username
  • Xcode es el projectname del projectname
  • master es la branch
  • InOnePicture.png es la image , en mi caso InOnePicture.png está en el directorio raíz.

También puede agregar imágenes con etiquetas HTML simples:

<p align="center"> <img src="your_relative_path_here" width="350" title="hover text"> <img src="your_relative_path_here_number_2_large_name" width="350" alt="accessibility text"> </p>

También puedes usar rutas relativas como

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

SOLO ESTO FUNCIONA !!

cuide su nombre de archivo en mayúscula en la etiqueta y ponga la raíz del archivo PNG, y vincule al nombre de archivo sin ninguna ruta:

![Screenshot](screenshot.png)

Confíe su imagen ( image.png ) en una carpeta ( myFolder ) y agregue la siguiente línea en su archivo README.md :

![Optional Text](../master/myFolder/image.png)

  • Puedes crear un nuevo número
  • subir imágenes (arrastrar y soltar) a ella
  • Copie la URL de las imágenes y péguela en su archivo README.md.

Aquí hay un video detallado de youTube explicado en detalle:

https://www.youtube.com/watch?v=nvPOUdz5PL4

  • Crear un problema relacionado con la adición de imágenes
  • Añade la imagen arrastrando y soltando o por el selector de archivos

  • Luego copia la fuente de la imagen

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

¡Hecho!

Alternativamente, puede usar un sitio de alojamiento de imágenes como imgur y obtener su url y agregarlo a su archivo README.md o también puede usar un alojamiento de archivos estáticos.

Problema de muestra