È possibile posizionare uno screenshot nel file README in un repository GitHub? Qual è la sintassi?

Se si utilizza Markdown (README.md):

A condizione che tu abbia l'immagine nel tuo repository, puoi utilizzare un URL relativo:

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

Se devi incorporare un'immagine ospitata altrove, puoi utilizzare un URL completo

![Alt text](http://full/path/to/img.jpg "Optional title")

GitHub consiglia di utilizzare i collegamenti relativi con il ?raw=trueparametro per garantire correttamente il punto di repository biforcato.

Il raw=trueparametro è lì per garantire che l'immagine a cui ci si collega, verrà resa così com'è. Ciò significa che verrà collegata solo l'immagine, non l'intera interfaccia GitHub per quel rispettivo file. Vedi questo commento per maggiori dettagli.

Guarda un esempio: https://raw.github.com/altercation/solarized/master/README.md

Se si utilizza SVG, allora avrete bisogno di impostare l'attributo sanitize a truepure: ?raw=true&sanitize=true. (Grazie @EliSherer)

Inoltre, la documentazione sui relativi collegamenti nei file README: https://help.github.com/articles/relative-links-in-readmes

E ovviamente i documenti di markdown: http://daringfireball.net/projects/markdown/syntax

Inoltre, se si crea un nuovo ramo screenshotsper memorizzare le immagini, è possibile evitare che si trovino nell'albero di masterlavoro

È quindi possibile incorporarli utilizzando:

![Alt text](/../<branch name>/path/to/image.png?raw=true "Optional Title")

Anche se esiste già una risposta accettata, vorrei aggiungere un altro modo per caricare immagini da leggere su GitHub.

• Devi creare un problema nel tuo repository
• Trascina e rilascia nell'area dei commenti la tua immagine
• Dopo aver generato il collegamento per l'immagine, inseriscilo nel file Leggimi

Maggiori dettagli puoi trovare qui

Ho scoperto che il percorso all'immagine nel mio repository non era sufficiente, ho dovuto collegarmi all'immagine sul raw.github.comsottodominio.

Formato URL https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH}

Esempio di markdown ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

1. Carica la tua immagine su postimage.org
2. Ottieni l'URL di Markdown di github
3. Inserisci nel tuo file Leggimi

Una riga di seguito dovrebbe essere quello che stai cercando

se il file è nel repository

![ScreenShot](https://raw.github.com/{username}/{repository}/{branch}/{path})

se il tuo file si trova in un altro URL esterno

![ScreenShot](https://{url})

La sintassi del markdown per la visualizzazione delle immagini è infatti:

![image](https://{url})

MA: come fornire il url?

• Probabilmente non vuoi ingombrare il tuo repository con schermate, non hanno nulla a che fare con il codice
• potresti non voler nemmeno affrontare la seccatura di rendere la tua immagine disponibile sul web ... (caricarla su un server ...).

Quindi ... puoi usare questo fantastico trucco per far ospitare a Github il tuo file immagine. TDLR:

1. crea un problema nell'elenco dei problemi del tuo repository
2. trascina e rilascia lo screenshot su questo problema
3. copia il codice markdown che github ha appena creato per farti visualizzare la tua immagine
4. incollalo sul tuo readme (o dove vuoi)

http://solutionoptimist.com/2013/12/28/awesome-github-tricks/

Molto più semplice dell'aggiunta di URL Basta caricare un'immagine nello stesso repository, come:

![Screenshot](screenshot.png)

aggiungi questo a README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>

Markdown: ![Screenshot](http://url/to/img.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 ![Screenshot](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

Metodo 1-> Markdown way

![Alt Text](https://raw.github.com/{USERNAME}/{REPOSITORY}/{BRANCH}/{PATH})

Metodo 2-> Modo HTML

<img src="https://link(format same as above)" width="100" height="100"/>

o

<img src="https://link" style=" width:100px ; height:100px " />

Nota -> Se non si desidera applicare uno stile all'immagine, ad esempio ridimensionare, rimuovere la parte di stile

Innanzitutto, crea una directory (cartella) nella radice del repository locale che conterrà ciò screenshotsche desideri aggiungere. Chiamiamo il nome di questa directory screenshots. Posiziona le immagini (JPEG, PNG, GIF, `ecc.) Che desideri aggiungere in questa directory.

Schermata dell'area di lavoro di Android Studio

In secondo luogo, è necessario aggiungere un collegamento a ciascuna immagine nel proprio README. Quindi, se ho le immagini nominate 1_ArtistsActivity.pnge 2_AlbumsActivity.pngnella mia directory schermate, aggiungerò i loro collegamenti in questo modo:

 <img src="screenshots/1_ArtistsActivity.png" height="400" alt="Screenshot"/> <img src=“screenshots/2_AlbumsActivity.png" height="400" alt="Screenshot"/>

Se si desidera ogni screenshot su una riga separata, scrivere i relativi collegamenti su righe separate. Tuttavia, è meglio se si scrivono tutti i collegamenti in una riga, separati solo dallo spazio. In realtà potrebbe non sembrare troppo bello, ma facendo così GitHub li organizza automaticamente per te.

Infine, esegui il commit delle modifiche e spingilo!

Ho cercato su Google alcune domande simili e non ho visto alcuna risposta al mio problema e alla sua soluzione abbastanza semplice / facile.

Google Cloud Storage: un approccio leggermente diverso alle immagini in README

Ecco qui: come l'OP, volevo un'immagine nel mio README di Github e, conoscendo la sintassi di Markdown per farlo, l'ho digitata:

![My Image](https://storage.cloud.google.com/${MY_BUCKET}/${MY_IMAGE}

È necessario completare le sostituzioni effettive sopra (ad esempio MY_IMAGE = image.jpg) affinché funzioni.

Ma aspetta ... fallimento - non c'è una vera foto renderizzata! E il link è esattamente come indicato da Google Storage!

Github camo- Immagini anonime

Github ospita le tue immagini in modo anonimo , yay! Tuttavia, ciò presenta un problema per le risorse di archiviazione di Google. Devi ottenere l'URL generato dalla tua Google Cloud Console.

Sono sicuro che esiste un modo più semplice, tuttavia, visita semplicemente il tuo endpoint URL specificato e copia l'URL lungo. Dettagli:

Istruzioni

1. Visita la tua console di archiviazione: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
2. Fai clic sull'immagine che desideri visualizzare in Github (viene visualizzata la pagina "Dettagli oggetto")
3. Copia pasta quell'URL (quello che inizia con httpsnon gs) in una nuova scheda / finestra del browser
4. Copia pasta il nuovo URL generato - dovrebbe essere più lungo - dalla nuova scheda / finestra del browser nel file README di Github

Speriamo che questo aiuti ad accelerare e chiarire questo problema per chiunque altro.

Per me il modo migliore è -

1. Crea un nuovo problema con quel repository su github e poi carica il file in formato gif. Per convertire i file video in formato gif puoi usare questo sito web http://www.online-convert.com/
2. Invia il problema appena creato.
3. Copia l'indirizzo del file caricato
4. Finalmente nel tuo file README metti! [Demo] (COPIED ADDRESS)

Spero che questo possa aiutare.

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

![Alt text]("enter image url of repositoryhere") 

Con le immagini situate nella /screen-shotsdirectory. L'esterno <div>consente di posizionare le immagini. L'imbottitura si ottiene usando <img width="desired-padding" height="0">.

<div align="center">
        <img width="45%" src="screen-shots/about.PNG" alt="About screen" title="About screen"</img>
        <img height="0" width="8px">
        <img width="45%" src="screen-shots/list.PNG" alt="List screen" title="List screen"></img>
</div>