Czy można umieścić zrzut ekranu w pliku README w repozytorium GitHub? Jaka jest składnia?

Jeśli używasz Markdown (README.md):

Pod warunkiem, że masz obraz w swoim repozytorium, możesz użyć względnego adresu URL:

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

Jeśli chcesz osadzić obraz hostowany w innym miejscu, możesz użyć pełnego adresu URL

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

GitHub zaleca używanie łączy względnych z ?raw=trueparametrem, aby zapewnić rozwidlenie punktu repos.

Ten raw=trueparametr służy do zapewnienia, że ​​obraz, do którego prowadzi łącze, będzie renderowany w takiej postaci, w jakiej jest. Oznacza to, że tylko obraz zostanie połączony, a nie cały interfejs GitHub dla tego odpowiedniego pliku. Zobacz ten komentarz, aby uzyskać więcej informacji.

Sprawdź przykład: https://raw.github.com/altercation/solarized/master/README.md

Jeśli używasz pomostów żylnych wtedy trzeba ustawić atrybut do dezynfekcji true, a także: ?raw=true&sanitize=true. (Dzięki @EliSherer)

Ponadto dokumentacja dotycząca odnośników względnych w plikach README: https://help.github.com/articles/relative-links-in-readmes

I oczywiście dokumenty Markdown: http://daringfireball.net/projects/markdown/syntax

Dodatkowo, jeśli utworzyć nowy oddział screenshotsdo przechowywania obrazów można uniknąć ich będąc w masterdrzewie pracy

Możesz je następnie osadzić, używając:

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

Mimo że istnieje już akceptowana odpowiedź, chciałbym dodać inny sposób przesyłania zdjęć do pliku readme na GitHub.

• Musisz stworzyć problem w swoim repozytorium
• Przeciągnij i upuść w polu komentarza swój obraz
• Po wygenerowaniu linku do obrazu wstaw go do pliku readme

Więcej informacji można znaleźć tutaj

Odkryłem, że ścieżka do obrazu w moim repozytorium nie była wystarczająca, musiałem połączyć się z obrazem w raw.github.comsubdomenie.

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

Przykład obniżki cen ![Settings Window](https://raw.github.com/ryanmaxwell/iArrived/master/Screenshots/Settings.png)

1. Prześlij swoje zdjęcie na postimage.org
2. Uzyskaj adres github Markdown
3. Wstaw do ReadMe

Jedna linia poniżej powinna być tym, czego szukasz

jeśli twój plik znajduje się w repozytorium

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

jeśli plik znajduje się w innym zewnętrznym adresie URL

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

Składnia przeceny do wyświetlania obrazów jest w rzeczywistości:

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

ALE: Jak zapewnić url?

• Prawdopodobnie nie chcesz zaśmiecać repozytorium zrzutami ekranu, nie mają one nic wspólnego z kodem
• możesz nie chcieć radzić sobie z kłopotami związanymi z udostępnianiem obrazu w Internecie ... (prześlij go na serwer ...).

Więc ... możesz użyć tej niesamowitej sztuczki, aby github hostował twój plik obrazu. TDLR:

1. utwórz problem na liście problemów swojego repozytorium
2. przeciągnij i upuść zrzut ekranu dotyczący tego problemu
3. skopiuj kod rabatowy, który właśnie utworzył github, aby wyświetlić obraz
4. wklej go w pliku Readme (lub gdziekolwiek chcesz)

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

Znacznie prostsze niż dodawanie adresu URL Wystarczy załadować obraz do tego samego repozytorium, na przykład:

![Screenshot](screenshot.png)

dodaj to do README

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

Obniżka cen: ![Screenshot](http://url/to/img.png)

• Utwórz problem dotyczący dodawania zdjęć
• Dodaj obraz, przeciągając i upuszczając lub wybierając plik

• Następnie skopiuj źródło obrazu

• Teraz dodaj ![Screenshot](http://url/to/img.png)do pliku README.md

Gotowy!

Alternatywnie możesz użyć witryny hostingu obrazów, na przykład imguruzyskać adres URL i dodać go do pliku README.md lub hostować pliki statyczne.

Przykładowy problem

Metoda 1-> Metoda Markdown

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

Metoda 2-> sposób HTML

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

lub

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

Uwaga -> Jeśli nie chcesz stylizować obrazu, tzn. Zmienić rozmiaru, usuń część stylu

Najpierw utwórz katalog (folder) w katalogu głównym lokalnego repozytorium, który będzie zawierać screenshotsżądany dodatek. Nazwijmy ten katalog screenshots. Umieść obrazy (JPEG, PNG, GIF, `itp.), Które chcesz dodać do tego katalogu.

Zrzut ekranu obszaru roboczego Android Studio

Po drugie, musisz dodać link do każdego obrazu do swojego README. Więc jeśli mam obrazy o nazwach 1_ArtistsActivity.pngi 2_AlbumsActivity.pngw moim katalogu zrzutów ekranu, dodam ich linki w następujący sposób:

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

Jeśli chcesz, aby każdy zrzut ekranu znajdował się w osobnej linii, napisz ich linki w osobnych liniach. Lepiej jest jednak napisać wszystkie linki w jednym wierszu, oddzielone tylko spacją. Może nie wygląda to zbyt dobrze, ale dzięki temu GitHub automatycznie zaaranżuje je dla Ciebie.

Wreszcie, zatwierdź swoje zmiany i wciśnij je!

Przeszukałem kilka podobnych pytań i nie znalazłem odpowiedzi na mój problem i jego dość proste / łatwe rozwiązanie.

Google Cloud Storage - nieco inne podejście do obrazów w plikach README

Oto i tak: podobnie jak OP chciałem obraz w moim Github README i znając składnię Markdown, wpisałem go:

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

Aby to zadziałało, musisz wypełnić powyższe faktyczne podstawienia (np. MY_IMAGE = image.jpg).

Ale czekaj ... porażka - nie ma faktycznie renderowanego zdjęcia! Link jest dokładnie taki, jak podany przez Google Storage!

Github camo- Anonimowe obrazy

Github hostuje twoje zdjęcia anonimowo , tak! Stanowi to jednak problem dla zasobów pamięci masowej Google. Musisz pobrać wygenerowany adres URL z konsoli Google Cloud.

Jestem pewien, że istnieje płynniejszy sposób, po prostu odwiedź podany punkt końcowy adresu URL i skopiuj długi adres URL. Detale:

Instrukcje

1. Odwiedź konsolę do przechowywania danych: https://console.cloud.google.com/storage/browser/ $ {MY_BUCKET}? Project = $ {MY_PROJECT}
2. Kliknij obraz, który chcesz wyświetlić w Github (wyświetli się strona „Szczegóły obiektu”)
3. Skopiuj makaron tego adresu URL (ten, który zaczyna się od httpsnie gs) do nowej karty / okna przeglądarki
4. Skopiuj makaron nowego wygenerowanego adresu URL - powinien być dłuższy - z nowej karty / okna przeglądarki do pliku Github README

Mamy nadzieję, że pomoże to przyspieszyć i wyjaśnić ten problem innym osobom.

Dla mnie najlepszym sposobem jest -

1. Utwórz nowy problem z tym repozytorium na github, a następnie prześlij plik w formacie gif. Aby przekonwertować pliki wideo na format gif, możesz skorzystać z tej witryny http://www.online-convert.com/
2. Prześlij nowo utworzony problem.
3. Skopiuj adres przesłanego pliku
4. Wreszcie w pliku README umieść! [Demo] (COPIED ADDRESS)

Mam nadzieję, że to pomoże.

Dodaj obraz w repozytorium z opcji przesyłania pliku, a następnie do pliku README

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

Z obrazami znajdującymi się w /screen-shotskatalogu. Zewnętrzne <div>pozwala na ustawienie obrazów. Wypełnienie uzyskuje się za pomocą <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>