Jak dodać zrzut ekranu do plików README w repozytorium github?

594

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

stokrotka
źródło
1
Prawidłowym rozwiązaniem tego jest użycie referencji względnych, zgodnie z tą odpowiedzią stackoverflow.com/a/11916467/1633251 (zobacz komentarz z łączem do nowego dokumentu github na temat tego, jak to zrobić). Odpowiedź jest krótka do użytku[Read more words!](docs/more_words.md)
David H
2
Większość rozwiązań wskazuje na samo repozytorium. Co jeśli chcesz uniknąć plików binarnych w repozytorium (nawet w oddzielnej gałęzi, zgodnie z propozycją) i chcesz przechowywać go w miejscu zewnętrznym? Jakieś dobre praktyki? Może istota (IDK, jeśli istota może być binarna lub tylko tekstowa)? tworzysz kolejne repozytorium „myproject-resources” dla projektu „myproject”? Jakieś zewnętrzne popularne miejsce na zdjęcia podobne do faktycznego standardu YouTube do przesyłania filmów?
Xavi Montero,
1
Możliwy duplikat dodawania zdjęć do README.md na GitHub
ashokramcse

Odpowiedzi:

850

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")
Paweł
źródło
1
Cóż, dodałem oficjalne dokumenty dotyczące linków względnych, ale nie jestem w stanie znaleźć repozytorium, które ich użyje, jeśli masz sugestie, chętnie pomogę, ponieważ cały punkt pomaga większej liczbie osób, a nie pozostaje w zasięgu (mój błąd tutaj).
Paul
2
@Paul, oto przykładowe repozytorium, które właśnie to robi! github.com/Tarrasch/zsh-bd
Tarrasch
4
github.com/altercation/solarized jest renderowaną wersją powyższego przykładu, na wypadek, gdyby komukolwiek to pomogło.
barrycarter
3
Kiedy mówisz /relative/path/to/img.jpg, czy nie jest to absolutna ścieżka z powodu wiodącego cięcia?
JWW
1
@kelvin, raw=trueparametr służy do renderowania obrazu, na który wskazuje ścieżka GitHub, a nie interfejsu GitHub. Spróbuj i zobacz różnicę: github.com/altercation/solarized/blob/master/img/... vs github.com/altercation/solarized/blob/master/img/... . Pierwszy adres URL pokazuje interfejs GitHub i obraz, a drugi pokazuje tylko obraz. Względne linki są nadal przydatne podczas klonowania / tworzenia repozytoriów, więc tak, powinieneś używać ścieżek względnych z tym parametrem, ale są to dwie różne koncepcje.
Paul
70

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


źródło
6
Interesuje mnie, jak długo będą ładowane obrazy załadowane w ten sposób. Czy github wykonuje czyszczenie niektórych obrazów? Na przykład: „jeśli do tego obrazu nie odwołuje się żaden problem z githubem, mogę go bezpiecznie usunąć” ...
artin
1
@Artin prawdopodobnie tylko wtedy, gdy problem zostanie całkowicie usunięty. Zamknięte problemy
trwają na
55

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)

Ryan
źródło
4
Głosowanie w dół z powodu komentarza @sorens do zaakceptowanej odpowiedzi. Określenie kąpieli bezwzględnej jest złe, ponieważ nie będzie dobrze działać na rozwidlonych repozytoriach. (Lub jeśli zmienisz nazwę swojego repo lub jeśli github zmieni nazwę domeny itp.)
Linus Unnebäck
7
@ LinusUnnebäck: Jest jeden dobry powód, aby używać ścieżek bezwzględnych imho: Jeśli readme.md jest używany również w innych miejscach, na przykład jako strona główna Doxygen. Względne linki nie będą wtedy działać.
Ela782,
1
@ Ela782, chociaż, z drugiej strony, nie powinno to stanowić problemu dla oprogramowania, które zgrywa pliki README specjalnie z GitHub ; takie oprogramowanie powinno wiedzieć, jak poprawnie rozwiązywać względne adresy URL. npm robi .
Mark Amery
jak link do obrazu w raw.github.comsubdomenie? gdzie przesłać plik obrazu?
Saif
@ Saif raw.github.com to tylko odzwierciedlenie tego, co jest zaangażowane w Twoje repozytorium github. Po prostu prześlij obraz do swojego repozytorium i postępuj zgodnie z określonym formatem adresu URL.
24
  1. Prześlij swoje zdjęcie na postimage.org
  2. Uzyskaj adres github Markdown
  3. Wstaw do ReadMe
diju
źródło
2
Ten adres URL powinien być zmiana jak postimages.org
Indrajith Ekanayake
Jesteś jedynym, którego odpowiedź była dla mnie przydatna
Cypher
21

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})
mmcorrelo
źródło
2
zasugeruj użycie względnego łącza pliku obrazu, zobacz Łącza względne w plikach README - Pomoc Github
shaobin0604
2
-1 z powodu podanego przez @ shaobin0604; oficjalni doktorzy zalecają używanie linków względnych podczas łączenia z plikiem we własnym repozytorium, aby po rozwidleniu link wskazywał właściwe miejsce.
Mark Amery
17

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/

edelany
źródło
7

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

![Screenshot](screenshot.png)

Taymour Niazi
źródło
7

dodaj to do README

<div align="center">
    <img src="/screenshots/screen1.jpg" width="400px"</img> 
</div>
Dan Alboteanu
źródło
4

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

abe312
źródło
Zrobiłem to dawno temu, teraz zdjęcia są niedostępne. Więc nie polecam tego.
Namek
W takim przypadku zawsze możesz użyć imgur lub niestandardowego obrazu cdn :)
abe312
4

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

shaurya uppal
źródło
1

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!

Zizoh
źródło
1

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!

zrzut ekranu nieudanego przesyłania obrazu Github

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.

Jason R. Stevens CFA
źródło
FYI - Wygląda na to, że coś się zmienia po stronie Google lub Github. Miałem kilka obrazów w README, które zawiodły przy użyciu tej metody, a niektóre działały od popołudnia 28 marca 2020 r. Tutaj YMMV!
Jason R. Stevens CFA
0

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.

Asifur Rahman
źródło
Czym różni się od stackoverflow.com/a/32252663/1570104 ?
edelans
0

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

![Alt text]("enter image url of repositoryhere") 
Marium Jawed
źródło
-5

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>
Mick Cullen
źródło
1
Przez całe życie nie mogłem wymyślić obrazu w README - który zawiera twoja odpowiedź, więc dziękuję!
Cody Reichert
Uznałem tę odpowiedź za przydatną, ponieważ umożliwia ustawienie wymiarów obrazu
Stanley