Aggiungi immagini a README.md su GitHub

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

Ho bisogno di includere alcune immagini nel mio file README. Non so come farlo.

Ho cercato su questo, ma tutto ciò 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”.

C’è 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 colbind direttamente alla versione originale di un’immagine se è archiviata nel tuo repository. vale a dire

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

Modifica: commento appena notato che collega all’articolo che suggerisce l’uso di gh-pages. Inoltre, i collegamenti relativi possono essere un’idea migliore degli URL assoluti che ho postato sopra.

Puoi anche usare percorsi relativi come

 ![Alt text](relative/path/to/img.jpg?raw=true "Title") 
  • È ansible creare un nuovo numero
  • caricare (trascinare e rilasciare) le immagini su di esso
  • Copia l’URL delle immagini e copia l’URL dell’immagine nel tuo file README.md.

ecco un video dettagliato di youTube spiegato in dettaglio:

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

È molto più semplice di così.

Carica la tua immagine nella root del repository e collega il nome del file senza alcun percorso, in questo modo:

 ![Screenshot](screenshot.png) 

Puoi anche aggiungere immagini con semplici tag HTML :

 

accessibility text

Molte delle soluzioni pubblicate sono incomplete o non a 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 trucco. Crea confusione e confonde gli utenti. È difficile migrare questa soluzione a un fork o distriggersre GitHub.
  • L’uso del ramo gh-pages rende gli URL fragili. Un’altra persona che lavora al progetto mantenendo la gh-page potrebbe non sapere che qualcosa di esterno dipende dal percorso di queste immagini. Il ramo gh-pages ha un comportamento particolare su GitHub che non è necessario per ospitare le immagini CDN.
  • Tenere traccia delle risorse nel controllo della versione è una buona cosa. Quando 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 specifica revisione del software, potrebbe essere preferibile colbind un’immagine immutabile. In questo modo, se l’immagine viene successivamente aggiornata per riflettere le modifiche al software, chiunque leggendo il file readme di quella revisione troverà l’immagine corretta.

La mia soluzione preferita, ispirata a questo punto , è quella di utilizzare un ramo patrimoniale 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 needed below. 

Costruisci un “permalink” per questa revisione dell’immagine e avvolgila in Markdown:

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

per esempio

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

Per mostrare sempre l’ultima immagine sul ramo patrimoniale, utilizzare le assets al posto dello sha:

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

Configura la tua immagine ( image.png ) in una cartella ( myFolder ) e aggiungi la seguente riga nel tuo README.md :

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

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:

stack overflow image di alamin

  • Creare un problema riguardante l’aggiunta di immagini
  • Aggiungi l’immagine trascinandola e rilasciandola per 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 un sito di hosting di immagini come imgur e ottenere la sua url e aggiungerlo nel tuo file README.md oppure puoi anche usare un hosting di file statici.

Problema di esempio

Basta aggiungere un tag al tuo README.md con relativo src al tuo repository. Se non si sta utilizzando src relativo, assicurarsi che il server supporti CORS.

Funziona perché GitHub supporta inline-html

 My cool logo # My cool project and above is the logo of it 

Osserva qui

Ho bisogno di includere alcune immagini nel mio file README. Non so come farlo.

Ho creato un piccolo wizard che consente di creare e personalizzare semplici gallerie di immagini per il file readme del repository GitHub: vedere 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 popolare trucco per caricare le immagini su GitHub trascinandole nell’area di emissione (come già menzionato in una delle risposte in questa discussione).

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

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

Di solito ospitiamo l’immagine sul sito, questo può collegarsi a qualsiasi immagine ospitata. Basta lanciare questo nel readme. Funziona con i file .rst , non sono sicuro di .md

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

Puoi colbind le immagini nel tuo progetto da README.md (o esternamente) usando il link CDN github alternativo.

L’URL sarà simile a questo:

 https://cdn.rawgit.com////// 

Ho un’immagine SVG nel mio progetto e quando faccio riferimento alla documentazione del mio progetto Python, non esegue il rendering.

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

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

Collegamento CDN

Usando il collegamento CDN, posso collegarmi al file usando (rendering come immagine):

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

Esempio di immagine incorporata: Immagine

In questo modo sono in grado di utilizzare immagini dal mio progetto sia nel mio file README.md , sia nel mio progetto PyPi reStructredText doucmentation ( qui )

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

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

inserisci la descrizione dell'immagine qui

inserisci la descrizione dell'immagine qui

Nel mio caso volevo mostrare una schermata di stampa su Github ma anche su NPM . Anche se l’utilizzo del percorso relativo funzionava all’interno di Github , non funzionava al di fuori di esso. Fondamentalmente, anche se ho spinto il mio progetto su NPM (che utilizza semplicemente lo stesso file readme.md , l’immagine non veniva mai visualizzata.

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 correttamente la mia immagine su NPM o altrove che potrei pubblicare il mio pacchetto.

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

  1. Intialize 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 qualsiasi immagine nella cartella doc. Successivamente aggiungili tramite il comando git add .

  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 l’immagine è caricata * ^image_location in the repo^ è la posizione inclusa la cartella in cui è memorizzata l’immagine.

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

Guarda questo dal mio progetto come riferimento.

Quindi puoi usare l’url per includerli usando la syntax markdown di cui sopra:

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

Ad esempio: supponiamo di usare questa foto Quindi puoi usare la syntax markdown:

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

PIÙ RECENTE

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. Usando la barra laterale wiki, vai alla pagina che vuoi modificare, quindi fai clic su Modifica.

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

  5. Nella finestra di dialogo “Inserisci immagine”, digita l’URL dell’immagine e il testo alternativo (utilizzato dai motori di ricerca e dagli screen reader).
  6. Clicca OK.

Consulta i documenti .

Possiamo farlo semplicemente,

  • crea un nuovo numero su GitHub
  • trascinare e rilasciare le immagini sul div body di Issue

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

SOLO QUESTO FUNZIONA !!

prendersi cura del nome del file in maiuscolo nel tag e inserire il file PNG inroot e collegarlo al nome file senza alcun percorso:

 ![Screenshot](screenshot.png) 

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

Una volta che hai messo l’immagine sul tuo repository Github.

Poi:

  • Apri il repository Github corrispondente sul tuo browser.
  • Passare al file immagine di destinazione Quindi basta aprire l’immagine in una nuova scheda. Aprendo l'immagine in una nuova scheda
  • Copia l’url Copia l'url dalla scheda del browser
  • 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 è il mio username
  • Xcode è il nome del progetto
  • master è il branch
  • InOnePicture.png è l’ image , Nel mio caso InOnePicture.png è nella directory principale.