Pregunta Agregue imágenes a README.md en GitHub


Recientemente me uní 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 lo único que obtuve fueron algunos enlaces que me dicen "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 ningún servicio de alojamiento web de terceros?


1069
2018-01-24 05:44


origen


Respuestas:


Pruebe este descuento:

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

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

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

Editar: acabo de notar un comentario que enlaza al artículo que sugiere usar gh-páginas. Además, los enlaces relativos pueden ser una mejor idea que las URL absolutas que publiqué anteriormente.


1132
2018-01-24 05:46



También puedes usar rutas relativas como

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

182
2017-10-08 03:18



  • Puedes crear un nuevo problema
  • subir (arrastrar y soltar) imágenes a él
  • Copie la URL de las imágenes y copie la página de la URL de la imagen en su archivo README.md.

aquí hay un video detallado de YouTube explicado en detalle:

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


116
2017-10-28 06:03



Es mucho más simple que eso.

Simplemente cargue su imagen en la raíz del repositorio y vincule el nombre del archivo sin ninguna ruta, como sigue:

![Screenshot](screenshot.png)

58
2017-07-08 20:07



También puede agregar imágenes con simple Etiquetas HTML:

<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>

58
2018-01-30 04:45



Muchas de las soluciones publicadas están incompletas o no son de 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 truco. Crea desorden y confunde a los usuarios. Es un dolor migrar esta solución a una bifurcación, o fuera de GitHub.
  • El uso de la rama gh-pages hace que las URL sean frágiles. Es posible que otra persona que trabaje en el proyecto manteniendo la página gh no sepa que algo externo depende de la ruta 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 algo bueno. A medida que un proyecto crece y cambia, es una forma más sostenible de administrar y rastrear cambios por parte de múltiples usuarios.
  • Si una imagen se aplica a una revisión específica del software, puede ser preferible vincular una imagen inmutable. De esta forma, si la imagen se actualiza posteriormente para reflejar los cambios en el software, cualquier persona que lea el archivo léxico de esa revisión encontrará la imagen correcta.

Mi solución preferida, inspirada en esta esencia, es usar un 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 el marcado:

![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 del sha:

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


20
2018-03-08 17:13



Cometer tu imagen (image.png) en una carpeta (mi carpeta) y agregue la siguiente línea en su README.md:

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


13
2018-06-14 10:01



Sintaxis Básica

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

Aquí:

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

Ejemplo:

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

Esto se verá así:

stack overflow image by alamin


11
2018-01-21 16:09



  • Crear un problema relacionado con la adición de imágenes
  • Agregue la imagen arrastrando y soltando o por selector de archivos
  • Luego copia la fuente de la imagen

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

¡Hecho!

Alternativamente, puede usar algún sitio de alojamiento de imágenes como imgur y obtenga su URL y agréguela en su archivo README.md o también puede usar un alojamiento de archivos estáticos.

Problema de muestra


11
2017-10-12 19:02