Recientemente me uní a GitHub . Recibí 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 hacerlo sin alojar las imágenes en ningún servicio de alojamiento web de terceros?

Prueba este descuento:

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

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

![alt text](https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true)

También puedes usar rutas relativas como

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

• Puedes crear un nuevo problema
• cargar (arrastrar y soltar) imágenes
• 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

Es mucho más simple que eso.

Simplemente suba su imagen a la raíz del repositorio y enlace al nombre del archivo sin ninguna ruta, de esta manera:

![Screenshot](screenshot.png)

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>

Muchas de las soluciones publicadas están incompletas o no son de mi agrado.

• 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 difícil 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 que mantiene la página gh no sepa 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 los cambios 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 esa manera, si la imagen se actualiza más tarde para reflejar los cambios en el software, cualquiera que lea el archivo Léame de esa revisión encontrará la imagen correcta.

Mi solución preferida, inspirada en esta esencia , es utilizar 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 optional, you'll see below.

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

Sin embargo, buscar el SHA de confirmación a mano es inconveniente, por lo tanto, como acceso directo, presione Y para acceder a un enlace permanente a un archivo en una confirmación específica, como dice esta página help.github.

Para mostrar siempre la última imagen en la rama de activos, use la URL de blob:

https://github.com/github/{repository}/blob/assets/cat.png 

(Desde la misma página de ayuda de GitHub, las vistas de archivo muestran la última versión en una rama )

Comprometan su imagen ( image.png ) en una carpeta ( miCarpeta ) y añadir la siguiente línea en su README.md :

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

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

• Luego copie la fuente de la imagen

• Ahora agregue ![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 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

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

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

El asistente aprovecha el hecho de que GitHub permite que se produzcan etiquetas img en el README.md. Además, el asistente utiliza el truco popular de subir imágenes a GitHub arrastrándolas y soltándolas en el área de problema (como ya se mencionó en una de las respuestas en este hilo).

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

Funciona porque GitHub admite html en línea

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

Observa aquí

Sintaxis Básica

![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: sea cual sea su recurso de imagen. URI de la imagen

Ejemplo:

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

Esto se verá así:

Use tablas para destacar, le dará un encanto por separado

La sintaxis de la tabla es:

Separe cada celda de la columna por símbolo |

y encabezado de tabla (primera fila) por segunda fila por ---

El | col 1 | col 2 |
| ------------ | ------------- |
El | imagen 1 | imagen 2 |

salida

Ahora solo coloca la <img src="url/relativePath">imagen 1 y la imagen 2 si estás usando dos imágenes

Nota: si el uso de varias imágenes solo incluye más columnas, puede usar el atributo ancho y alto para que parezca legible.

Ejemplo

El | col 1 | col 2 |
| ------------ | ------------- |
El | <img src="https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_582,c_limit/so-logo-s.jpg" width="250"> El | <img src="https://mk0jobadderjftub56m0.kinstacdn.com/wp-content/uploads/stackoverflow.com-300.jpg" width="250">El |

El espacio no importa

Imagen de salida

ayudado por: adam-p

Solo puedes hacer:

git checkout --orphan assets
cp /where/image/currently/located/on/machine/diagram.png .
git add .
git commit -m 'Added diagram'
git push -u origin assets

Luego puede hacer referencia en el READMEarchivo de la siguiente manera:

![diagram](diagram.png)

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

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

Puede vincular a las imágenes en su proyecto desde README.md (o externamente) utilizando el enlace alternativo github CDN.

La URL se verá así:

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

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

Enlace del proyecto

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

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

Ejemplo de imagen incrustada:

Enlace sin procesar

Aquí está el enlace RAW al archivo (todavía no se muestra 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 muestra 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 README.mdarchivo como en mi documentación reStructredText del proyecto PyPi ( aquí )

He resuelto este problema. Solo necesita consultar el archivo Léame de otra persona.

¡Al principio, debe cargar un archivo de imagen en la biblioteca de códigos github! Luego referencia directa a la dirección del archivo de imagen.

Normalmente alojo la imagen en el sitio, esto puede vincular a cualquier imagen alojada. Solo agrega esto en el archivo Léame. Funciona para .rstarchivos, no estoy seguro.md

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

En mi caso, quería mostrar una pantalla de impresión encendida Githubpero también encendida NPM. Aunque usar la ruta relativa funcionaba dentro Github, no funcionaba fuera de ella. Básicamente, incluso si empujé mi proyecto NPMtambién (que simplemente usa el mismoreadme.md , la imagen nunca se mostraba.

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

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

Ahora veo mi imagen correctamente NPMo en cualquier otro lugar donde podría publicar mi paquete.

En caso de que necesite cargar algunas imágenes para la documentación, un buen enfoque es usar git-lfs . Asumiendo que ha instalado git-lfs, siga estos pasos:

1. Inicialice 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 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. Copie y pegue las imágenes en la carpeta doc. Luego, agréguelos mediante un git addcomando.

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

Donde: * ^github_username^es el nombre de usuario en github (puede encontrarlo en la página de 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 que incluye la carpeta donde se almacena la imagen.

También puede cargar la imagen primero, luego visitar la ubicación en la página de github de su proyecto y navegar hasta encontrar la imagen y luego presionar el botón download botón y luego copiar y pegar la URL de la barra de direcciones del navegador.

Mira esto de mi proyecto como referencia.

Luego puede usar la url para incluirlos utilizando la sintaxis de descuento 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:

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

¡SOLO ESTO FUNCIONA!

tenga cuidado con el nombre del archivo en mayúscula en la etiqueta y coloque el archivo PNG en la raíz, y enlace al nombre del archivo sin ninguna ruta:

![Screenshot](screenshot.png)

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

Una vez que haya puesto la imagen en su repositorio de Github.

Entonces:

• Abra el repositorio de Github correspondiente en su navegador.
• Navegue hasta el archivo de imagen de destino. Luego, simplemente abra la imagen en una pestaña nueva.
• Copia 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
• master es el branch
• InOnePicture.pnges el image, en mi caso InOnePicture.pngestá en el directorio raíz.

Hay 2 formas simples de hacer esto,

1) usa la etiqueta img HTML,

2)! [] (La ruta donde se guarda su imagen / image-name.png)

la ruta que podría copiar de la URL en el navegador mientras ha abierto esa imagen. puede haber un problema de espaciado, así que asegúrese de que haya espacio en blanco y negro con dos palabras de ruta o en el nombre de la imagen add->% 20. tal como lo hace el navegador.

Ambos funcionarán, si quieres entender más puedes consultar mi github -> https://github.com/adityarawat29

Esta respuesta también se puede encontrar en: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Mostrar imágenes del repositorio usando:

anteponer dominio: https://raw.githubusercontent.com/

agregar bandera: ?sanitize=true&raw=true

usar <img />etiqueta

• Dominio :raw.githubusercontent.com/
• Nombre de usuario :YourUserAccount/
• Repo :YourProject/
• Rama :YourBranch/
• Camino :DirectoryPath/
• Nombre de archivo :example.png

Funciona para SVG, PNG y JPEG

 - `raw.githubusercontent.com/YourUserAccount/YourProject/YourBranch/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true`

Código de ejemplo de trabajo que se muestra a continuación después de usarse:

**raw.githubusercontent.com**:
<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/Example.png?raw=true" />

<img src="https://raw.githubusercontent.com/YourUserAccount/YourProject/master/DirectoryPath/svgdemo1.svg?sanitize=true&raw=true" />

raw.githubusercontent.com :

Gracias: - https://stackoverflow.com/a/48723190/1815624 - https://github.com/potherca-blog/StackOverflow/edit/master/question.13808020.include-an-svg-hosted-on-github -in-markdown / readme.md

He encontrado otra solución pero bastante diferente y la explicaré

Básicamente, usé la etiqueta para mostrar la imagen, pero quería ir a otra página cuando se hizo clic en la imagen y así es como lo hice.

<a href="the-url-you-want-to-go-when-image-is-clicked.com" />
<img src="image-source-url-location.com" />

Si lo coloca uno al lado del otro, separados por una nueva línea, supongo que cuando hace clic en la imagen, va a la etiqueta que tiene el href al otro sitio que desea redirigir.

Ú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. Debajo de su nombre de repositorio, haga clic en Wiki.

3. Usando la barra lateral 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 usan los motores de búsqueda y los lectores de pantalla).
6. Haga clic en Aceptar.

Consulte los documentos .

Considere usar un tablesi agrega varias capturas de pantalla y desea alinearlas usando datos tabulares para una mejor accesibilidad como se muestra aquí:

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

Paso a paso, primero cree una carpeta (nombre su carpeta) y agregue la imagen / imágenes que desea cargar en el archivo Readme.md. (también puede agregar la imagen / imágenes en cualquier carpeta existente de su proyecto). Ahora, haga clic en el icono de edición del archivo Readme.md, luego

![](relative url where images is located/refrence_image.png)  // refrence_image is the name of image in my case.

Después de agregar la imagen, puede ver una vista previa de los cambios en la pestaña "Vista previa de cambios". Aquí encontrará su imagen. por ejemplo así, en mi caso,

![](app/src/main/res/drawable/refrence_image.png)

carpeta de la aplicación -> carpeta src -> carpeta principal -> carpeta res -> carpeta dibujable -> y dentro de la carpeta dibujable se encuentra el archivo refrence_image.png. Para agregar varias imágenes, puede hacerlo así,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Nota 1: asegúrese de que el nombre del archivo de imagen no contenga espacios. Si contiene espacios, entonces necesita agregar% 20 para cada espacio entre el nombre del archivo. Es mejor eliminar los espacios.

Nota 2: incluso puede cambiar el tamaño de la imagen con etiquetas HTML, o hay otras formas. puedes buscarlo en google para más. si lo necesitas.

Después de esto, escriba su mensaje de confirmación de cambios y luego confirme sus cambios.

Hay muchos otros trucos para hacerlo, crear un problema, etc., etc. Este es, con mucho, el mejor método que he encontrado.

Podemos hacer esto simplemente,

• crear un nuevo problema en GitHub
• arrastrar y soltar imágenes en el cuerpo divdel Issue

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

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

![Alt text]("enter repository image URL here") 

Hay otra opción que no he visto mencionada. Simplemente puede crear otro repositorio bajo su usuario u organización llamado "activos". Empuje sus imágenes a este repositorio y haga referencia a ellas desde sus otros repositorios:

![alt text](https://raw.githubusercontent.com/my-org/assets/master/folder/logo.png)

He hecho esto en uno de mis repositorios y me queda bien. Puedo versionar mis imágenes README para todos mis proyectos independientemente de mi código, pero aún así mantenerlas todas en un solo lugar . No se requieren problemas o ramas u otros artefactos fácilmente extraviados.