Di recente mi sono iscritto GitHub . Ho ospitato alcuni progetti lì.

Devo includere alcune immagini nel mio file README. Non so come farlo.

Ho cercato su questo, ma tutto quello che ho ottenuto sono stati alcuni collegamenti che mi dicono di "ospitare immagini sul web e specificare il percorso dell'immagine nel file README.md".

Esiste un modo per farlo senza ospitare le immagini su servizi di web hosting di terze parti?

Prova questo markdown:

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

Penso che puoi collegarti direttamente alla versione non elaborata di un'immagine se è memorizzata nel tuo repository. vale a dire

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

Puoi anche usare percorsi relativi come

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

• È possibile creare un nuovo numero
• carica (trascina e rilascia) le immagini su di essa
• Copia l'URL delle immagini e incollalo nel tuo file README.md.

ecco un video dettagliato di youTube che lo ha spiegato in dettaglio:

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

È molto più semplice di così.

Basta caricare l'immagine nella radice del repository e collegarla al nome file senza alcun percorso, in questo modo:

![Screenshot](screenshot.png)

Puoi anche aggiungere immagini con semplici tag 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>

Molte delle soluzioni pubblicate sono incomplete o non di mio gusto.

• Un CDN esterno come imgur aggiunge un altro strumento alla catena. Meh.
• La creazione di un problema fittizio nel tracker dei problemi è un hack. Crea disordine e confonde gli utenti. È una seccatura migrare questa soluzione su un fork o su GitHub.
• L'uso del ramo gh-pages rende gli URL fragili. Un'altra persona che sta lavorando al progetto mantenendo la gh-page potrebbe non sapere qualcosa di esterno dipende dal percorso di queste immagini. Il ramo gh-pages ha un comportamento particolare su GitHub che non è necessario per ospitare immagini CDN.
• Il monitoraggio delle risorse nel controllo versione è una buona cosa. Man mano che un progetto cresce e cambia, è un modo più sostenibile per gestire e tenere traccia delle modifiche da parte di più utenti.
• Se un'immagine si applica a una revisione specifica del software, potrebbe essere preferibile collegare un'immagine immutabile. In questo modo, se l'immagine viene successivamente aggiornata per riflettere le modifiche al software, chiunque legga il file Leggimi di quella revisione troverà l'immagine corretta.

La mia soluzione preferita, ispirata a questa sostanza , è quella di utilizzare un ramo di attività con permalink a revisioni specifiche .

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.

Costruisci un "permalink" per questa revisione dell'immagine e avvolgilo in Markdown.

Cercare lo SHA di commit a mano è comunque scomodo, quindi come scorciatoia premi Y per un permalink a un file in un commit specifico come dice questa pagina di help.github.

Per mostrare sempre l'ultima immagine nel ramo delle risorse, utilizzare l'URL BLOB:

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

(Dalla stessa pagina di aiuto di GitHub Le visualizzazioni dei file mostrano l'ultima versione su un ramo )

Commit vostra immagine ( image.png ) in una cartella ( myFolder ) e aggiungere la seguente riga nel vostro README.md :

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

• Crea un problema relativo all'aggiunta di immagini
• Aggiungi l'immagine trascinandola o tramite il selettore file

• Quindi copia la fonte dell'immagine

• Ora aggiungi ![alt tag](http://url/to/img.png)al tuo file README.md

Fatto!

In alternativa puoi usare alcuni siti di hosting di immagini come imgure ottenere il suo url e aggiungerlo nel tuo file README.md oppure puoi usare anche un hosting di file statico.

Problema di esempio

Devo includere alcune immagini nel mio file README. Non so come farlo.

Ho creato una piccola procedura guidata che ti consente di creare e personalizzare semplici gallerie di immagini per il file Leggimi del tuo repository GitHub: Vedi ReadmeGalleryCreatorForGitHub .

La procedura guidata sfrutta il fatto che GitHub consente ai tag img di verificarsi nel file README.md. Inoltre, la procedura guidata utilizza il trucco popolare di caricare immagini su GitHub trascinandole nell'area di rilascio (come già menzionato in una delle risposte in questo thread).

Basta aggiungere un <img> tag al tuo README.md con relativo src al tuo repository. Se non si utilizza src relativo, assicurarsi che il server supporti CORS.

Funziona perché GitHub supporta inline-html

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

Osserva qui

Sintassi di base

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

Qui:

1. my-image-alt-tag: testo che verrà visualizzato se l'immagine non viene mostrata.
2. url-to-image: qualunque sia la tua risorsa immagine. URI dell'immagine

Esempio:

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

Questo sarà simile al seguente:

Usa i tavoli per distinguerti, ti darà un fascino separato

La sintassi della tabella è:

Separare ogni cella di colonna per simbolo |

e l'intestazione della tabella (prima riga) per la seconda riga di ---

| col 1 | col 2 |
| ------------ | ------------- |
| immagine 1 | immagine 2 |

produzione

Ora metti solo l' <img src="url/relativePath">immagine 1 e l'immagine 2 se stai usando due immagini

Nota: se si utilizzano più immagini solo includere più colonne, è possibile utilizzare l'attributo larghezza e altezza per renderle leggibili.

Esempio

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

La spaziatura non ha importanza

Immagine di uscita

aiutato da: adam-p

Puoi semplicemente fare:

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

Quindi puoi semplicemente fare riferimento nel READMEfile in questo modo:

![diagram](diagram.png)

Nel mio caso uso imgur e utilizzo il collegamento diretto in questo modo.

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

Puoi collegarti alle immagini nel tuo progetto da README.md (o esternamente) usando il link alternativo a github CDN.

L'URL sarà simile al seguente:

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

Ho un'immagine SVG nel mio progetto e quando la faccio riferimento nella documentazione del mio progetto Python, non viene visualizzata.

Link al progetto

Ecco il link del progetto al file (non viene visualizzato come immagine):

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

Esempio di immagine incorporata:

Link non elaborato

Ecco il link RAW al file (non viene ancora visualizzato come immagine):

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

Esempio di immagine incorporata:

Collegamento CDN

Utilizzando il collegamento CDN, posso collegarmi al file utilizzando (rendering come immagine):

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

Esempio di immagine incorporata:

Questo è il modo in cui sono in grado di utilizzare le immagini del mio progetto sia nel mio README.mdfile, sia nel mio progetto PyPi reStructredText doucmentation ( qui )

Ho risolto questo problema. Devi solo fare riferimento al file readme di qualcun altro.

All'inizio, dovresti caricare un file immagine nella libreria di codici github! Quindi riferimento diretto all'indirizzo del file immagine.

Di solito ospito l'immagine sul sito, questo può collegarsi a qualsiasi immagine ospitata. Basta lanciare questo nel readme. Funziona per i .rstfile, non sono sicuro.md

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

Nel mio caso volevo mostrare una schermata di stampa su Githubma anche su NPM. Anche se l'utilizzo del relativo percorso funzionava all'interno Github, non funzionava al di fuori di esso. Fondamentalmente, anche se ho spinto anche il mio progetto NPM(che usa semplicemente lo stessoreadme.md , l'immagine non è mai stata mostrata.

Ho provato alcuni modi, alla fine questo è quello che ha funzionato per me:

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

Ora vedo la mia immagine correttamente su NPMo in qualsiasi altro luogo in cui sia possibile pubblicare il mio pacchetto.

Nel caso in cui sia necessario caricare alcune immagini per la documentazione, un buon approccio è usare git-lfs . Supponendo che tu abbia installato git-lfs segui questi passaggi:

1. Intializza git lfs per ogni tipo di immagine:

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

2. Creare una cartella che verrà utilizzata come posizione dell'immagine, ad es. doc. Sui sistemi basati su GNU / Linux e Unix questo può essere fatto tramite:

   cd project_folder
   mkdir doc
   git add doc
   

3. Copia incolla tutte le immagini nella cartella doc. Successivamente aggiungili tramite git addcomando.

4. Impegnati e spingi.

5. Le immagini sono disponibili pubblicamente nel seguente URL:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location nel repository ^

Dove: * ^github_username^è il nome utente in github (lo puoi trovare nella pagina del profilo) * ^repo_name^è il nome del repository * ^branch^è il ramo del repository in cui è caricata l'immagine *^image_location in the repo^ è la posizione inclusa la cartella in cui è memorizzata l'immagine.

Inoltre è possibile caricare prima l'immagine, quindi visitare la posizione nella pagina github dei progetti e navigare fino a trovare l'immagine, quindi premere il download pulsante e quindi copiare e incollare l'URL dalla barra degli indirizzi del browser.

Guarda questo dal mio progetto come riferimento.

Quindi puoi utilizzare l'URL per includerli usando la sintassi di markdown sopra menzionata:

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

Ad esempio: supponiamo di usare questa foto. Quindi puoi usare la sintassi del markdown:

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

SOLO QUESTO FUNZIONA !!

prenditi cura del nome del tuo file maiuscolo nel tag e metti il ​​file PNG inroot e collega al nome del file senza alcun percorso:

![Screenshot](screenshot.png)

Sto solo estendendo o aggiungendo un esempio alla risposta già accettata.

Dopo aver inserito l'immagine nel repository Github.

Poi:

• Apri il repository Github corrispondente sul tuo browser.
• Passa al file immagine di destinazione Quindi apri l'immagine in una nuova scheda.
• Copia l'URL
• E infine inserisci l'URL nel seguente schema ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Nel mio caso lo è

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

Dove

• shadmazumder è mio username
• Xcode è il projectname
• master è il branch
• InOnePicture.pngè il image, Sul mio caso InOnePicture.pngè nella directory principale.

Ci sono 2 semplici modi per farlo,

1) usa il tag img HTML,

2)! [] (Il percorso in cui è stata salvata la tua immagine / nome-immagine.png)

il percorso che potresti copiare dall'URL nel browser mentre hai aperto quell'immagine. potrebbe esserci un problema di spaziatura, quindi assicurati che ci sia spazio tra due parole del percorso o nel nome dell'immagine aggiungi->% 20. proprio come fanno i browser.

Funzioneranno entrambi, se vuoi capire di più puoi controllare il mio github -> https://github.com/adityarawat29

Questa risposta è disponibile anche su: https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Visualizza le immagini dal repository utilizzando:

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

append flag: ?sanitize=true&raw=true

usa <img />tag

• Dominio :raw.githubusercontent.com/
• Nome utente :YourUserAccount/
• Repo :YourProject/
• Ramo :YourBranch/
• Percorso :DirectoryPath/
• Nome file :example.png

Funziona con SVG, PNG e JPEG

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

Codice di esempio funzionante visualizzato di seguito dopo l'uso:

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

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

Ho trovato un'altra soluzione, ma abbastanza diversa e la spiegherò

Fondamentalmente, ho usato il tag per mostrare l'immagine, ma volevo andare in un'altra pagina quando l'immagine è stata cliccata ed ecco come l'ho fatta.

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

Se lo metti uno accanto all'altro, separati da una nuova riga, immagino che quando fai clic sull'immagine, si passa al tag che ha l'href sull'altro sito che desideri reindirizzare.

ULTIMO

I wiki possono visualizzare immagini PNG, JPEG o GIF

Ora puoi usare:

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

-O-

Segui questi passi:

1. Su GitHub, vai alla pagina principale del repository.

2. Sotto il nome del tuo repository, fai clic su Wiki.

3. Utilizzando la barra laterale del wiki, vai alla pagina che desideri modificare, quindi fai clic su Modifica.

4. Sulla barra degli strumenti wiki, fai clic su Immagine .

5. Nella finestra di dialogo "Inserisci immagine", digitare l'URL dell'immagine e il testo alternativo (che viene utilizzato dai motori di ricerca e dagli screen reader).
6. Clicca OK.

Consultare i documenti .

Prendi in considerazione l'idea di tableaggiungere più schermate e desideri allinearle utilizzando i dati tabulari per una migliore accessibilità, come mostrato qui:

Se il tuo parser markdown lo supporta, puoi anche aggiungere l' role="presentation"attributo WIA-ARIA all'elemento TABLE e omettere i thtag.

Procedura passo dopo passo, creare prima una cartella (denominare la cartella) e aggiungere l'immagine / le immagini che si desidera caricare nel file Readme.md. (puoi anche aggiungere l'immagine / le immagini in qualsiasi cartella esistente del tuo progetto.) Ora, fai clic sull'icona di modifica del file Readme.md, quindi

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

Dopo aver aggiunto l'immagine, puoi vedere l'anteprima delle modifiche nella scheda "Anteprima modifiche". Qui troverai l'immagine. per esempio come questo, nel mio caso,

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

cartella app -> cartella src -> cartella principale -> cartella res -> cartella drawable -> e si trova il file refrence_image.png all'interno della cartella drawable. Per aggiungere più immagini, puoi farlo in questo modo,

![](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: assicurarsi che il nome del file immagine non contenga spazi. Se contiene spazi, devi aggiungere% 20 per ogni spazio tra il nome del file. È meglio rimuovere gli spazi.

Nota 2: puoi persino ridimensionare l'immagine utilizzando i tag HTML o esistono altri modi. puoi cercarlo su Google per ulteriori informazioni. se ne hai bisogno.

Dopodiché, scrivi il messaggio di modifica delle modifiche, quindi esegui il commit delle modifiche.

Ci sono molti altri hack per farlo come, creare un problema, ecc. Ecc. Di gran lunga questo è il metodo migliore che mi sia mai imbattuto.

Possiamo farlo semplicemente,

• crea un nuovo numero su GitHub
• trascina e rilascia le immagini sul corpo divdel problema

dopo alcuni secondi, verrà generato un collegamento. Ora copia il link o l'URL dell'immagine e usalo su qualsiasi piattaforma supportata.

Aggiungi l'immagine nel tuo repository dall'opzione di caricamento del file, quindi nel file README

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

C'è ancora un'altra opzione che non ho visto menzionato. Puoi semplicemente creare un altro repository sotto il tuo utente o organizzazione chiamato "asset". Invia le tue immagini a questo repository e fai riferimento ad altri repository:

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

L'ho fatto in uno dei miei repository e mi va bene. Posso eseguire la versione delle mie immagini README per tutti i miei progetti indipendentemente dal mio codice, ma comunque conservarle tutte in un unico posto . Non sono richiesti problemi o rami o altri artefatti facilmente fuori posto.