Ostatnio dołączyłem do GitHub . Prowadziłem tam kilka projektów.

Muszę dołączyć niektóre obrazy do mojego pliku README. Nie wiem jak to zrobić.

Szukałem tego, ale dostałem tylko kilka linków, które mówią mi: „hostuj obrazy w sieci i określ ścieżkę obrazu w pliku README.md”.

Czy istnieje sposób, aby to zrobić bez hostowania obrazów w jakichkolwiek zewnętrznych serwisach hostingowych?

Spróbuj tego przeceny:

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

Myślę, że możesz połączyć bezpośrednio z surową wersją obrazu, jeśli jest on przechowywany w twoim repozytorium. to znaczy

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

Możesz także użyć ścieżek względnych, takich jak

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

• Możesz utworzyć nowy numer
• przesłać (przeciągnij i upuść) obrazy do niego
• Skopiuj adres URL obrazów i wklej go do pliku README.md.

oto szczegółowy film z YouTube, który szczegółowo to wyjaśnił:

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

To o wiele prostsze.

Po prostu prześlij swój obraz do katalogu głównego repozytorium i połącz go z nazwą pliku bez ścieżki, na przykład:

![Screenshot](screenshot.png)

Możesz także dodawać obrazy za pomocą prostych tagów 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>

Wiele opublikowanych rozwiązań jest niekompletnych lub nie w moim guście.

• Zewnętrzny CDN, taki jak imgur, dodaje kolejne narzędzie do łańcucha. Meh
• Tworzenie fałszywego problemu w narzędziu do śledzenia problemów to włamanie. Powoduje bałagan i dezorientuje użytkowników. Migracja tego rozwiązania do rozwidlenia lub z GitHub jest uciążliwa.
• Użycie gałęzi gh-pages sprawia, że ​​adresy URL są kruche. Inna osoba pracująca nad projektem utrzymująca stronę gh może nie wiedzieć, że coś zewnętrznego zależy od ścieżki do tych obrazów. Oddział gh-pages ma określone zachowanie na GitHub, które nie jest konieczne do przechowywania obrazów CDN.
• Śledzenie zasobów w kontroli wersji jest dobrą rzeczą. W miarę rozwoju i zmian projektu jest to bardziej zrównoważony sposób zarządzania i śledzenia zmian przez wielu użytkowników.
• Jeśli obraz dotyczy konkretnej wersji oprogramowania, może być wskazane połączenie obrazu niezmiennego. W ten sposób, jeśli obraz zostanie później zaktualizowany w celu odzwierciedlenia zmian w oprogramowaniu, każdy, kto czyta plik Readme tej wersji, znajdzie właściwy obraz.

Moim preferowanym rozwiązaniem, zainspirowanym tą istotą , jest użycie gałęzi aktywów z linkami do konkretnych wersji .

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.

Utwórz „bezpośredni link” do tej wersji obrazu i zawiń go w Markdown.

Ręczne sprawdzanie zatwierdzenia SHA jest jednak niewygodne, więc jako skrót naciśnij Y, aby przejść do pliku w konkretnym zatwierdzeniu, jak mówi ta strona help.github.

Aby zawsze wyświetlać najnowszy obraz w gałęzi zasobów, użyj adresu URL obiektu blob:

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

(Z tej samej strony pomocy GitHub Widoki plików pokazują najnowszą wersję w oddziale )

Zatwierdź swój obraz ( image.png ) w folderze ( myFolder ) i dodaj następujący wiersz w README.md :

![Optional Text](../master/myFolder/image.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 ![alt tag](http://url/to/img.png)do pliku README.md

Gotowy!

Alternatywnie możesz skorzystać z witryny hostingu obrazów, takiej jak imgur uzyskać adres URL i dodać go do pliku README.md lub hostować pliki statyczne.

Przykładowy problem

Muszę dołączyć niektóre obrazy do mojego pliku README. Nie wiem jak to zrobić.

Stworzyłem małego kreatora, który pozwala tworzyć i dostosowywać proste galerie obrazów dla pliku Readme repozytorium GitHub: patrz ReadmeGalleryCreatorForGitHub .

Kreator wykorzystuje fakt, że GitHub zezwala na występowanie znaczników img w README.md. Ponadto kreator korzysta z popularnej sztuczki polegającej na przesyłaniu obrazów do GitHub poprzez przeciąganie i upuszczanie ich w obszarze problemu (jak już wspomniano w jednej z odpowiedzi w tym wątku).

Po prostu dodaj <img> tag do README.md z relatywnym plikiem src do repozytorium. Jeśli nie używasz względnego src, upewnij się, że serwer obsługuje CORS.

Działa, ponieważ obsługuje GitHub inline-html

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

Obserwuj tutaj

Podstawowa składnia

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

Tutaj:

1. my-image-alt-tag: tekst, który zostanie wyświetlony, jeśli obraz nie zostanie wyświetlony.
2. url-to-image: niezależnie od zasobu graficznego. URI obrazu

Przykład:

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

Będzie to wyglądać następująco:

Użyj stołów, aby się wyróżnić, nada to osobny urok

Składnia tabeli to:

Oddziel każdą komórkę kolumny symbolem |

i nagłówek tabeli (pierwszy rząd) według drugiego rzędu według ---

| kol 1 | kol. 2 |
| ------------ | ------------- |
| zdjęcie 1 | zdjęcie 2 |

wynik

Teraz po prostu ustaw <img src="url/relativePath">obraz 1 i obraz 2, jeśli używasz dwóch obrazów

Uwaga: jeśli używasz wielu obrazów, po prostu dodaj więcej kolumn, możesz użyć atrybutu width i height, aby wyglądało to czytelnie.

Przykład

| kol 1 | kol. 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">|

Odstępy nie mają znaczenia

Obraz wyjściowy

wspomagany przez: adam-p

Możesz po prostu zrobić:

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

Następnie możesz po prostu odwołać się do niego w READMEpliku w następujący sposób:

![diagram](diagram.png)

W moim przypadku używam imgur i w ten sposób używam bezpośredniego łącza.

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

Możesz połączyć się z obrazami w swoim projekcie z README.md (lub zewnętrznie), używając alternatywnego łącza github CDN.

Adres URL będzie wyglądał następująco:

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

Mam obraz SVG w moim projekcie i gdy odwołuję się do niego w dokumentacji projektu Python, nie jest renderowany.

Link do projektu

Oto link do projektu do pliku (nie jest renderowany jako obraz):

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

Przykład osadzonego obrazu:

Nieprzetworzony link

Oto link RAW do pliku (nadal nie jest renderowany jako obraz):

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

Przykład osadzonego obrazu:

Łącze CDN

Za pomocą łącza CDN mogę połączyć się z plikiem za pomocą (renderuje jako obraz):

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

Przykład osadzonego obrazu:

W ten sposób mogę używać obrazów z mojego projektu zarówno w moim README.mdpliku, jak i w moim projekcie PyPi reStructredText Doucmentation ( tutaj )

Rozwiązałem ten problem. Musisz tylko odwołać się do czyjegoś pliku readme.

Najpierw należy przesłać plik obrazu do biblioteki kodów github! Następnie bezpośrednie odniesienie do adresu pliku obrazu.

Zwykle hostuję obraz na stronie, może to prowadzić do dowolnego hostowanego obrazu. Po prostu wrzuć to do pliku Readme. Działa dla .rstplików, nie jestem pewien.md

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

W moim przypadku chciałem wyświetlać ekran drukowania na, Githubale także na NPM. Mimo że użycie ścieżki względnej działało wewnątrz Github, nie działało poza nią. Zasadniczo, nawet jeśli przesunąłem również mój projekt do NPM(który używa tego samegoreadme.md , obraz nigdy się nie wyświetlał).

Próbowałem na kilka sposobów, na koniec to, co mi się udało:

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

Teraz widzę mój obraz poprawnie w NPMdowolnym miejscu, w którym mógłbym opublikować swój pakiet.

Jeśli potrzebujesz załadować zdjęcia do dokumentacji, dobrym rozwiązaniem jest użycie git-lfs . Zakładając, że zainstalowałeś git-lfs, wykonaj następujące kroki:

1. Zinicjalizuj git lfs dla każdego typu obrazu:

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

2. Utwórz folder, który będzie używany jako lokalizacja obrazu, np. doc. W systemach opartych na GNU / Linux i Unix można to zrobić za pomocą:

   cd project_folder
   mkdir doc
   git add doc
   

3. Skopiuj wklej dowolne obrazy do folderu doc. Następnie dodaj je za pomocą git addpolecenia.

4. Zatwierdź i pchnij.

5. Obrazy są publicznie dostępne w następującym adresie URL:

   https://media.githubusercontent.com/media/ ^ github_username ^ / ^ repo ^ / ^ branch ^ / ^ image_location in the repo ^

Gdzie: * ^github_username^to nazwa użytkownika w github (można ją znaleźć na stronie profilu) * ^repo_name^to nazwa repozytorium * ^branch^to gałąź repozytorium, do której obraz jest przesyłany * ^image_location in the repo^to lokalizacja zawierająca folder, w którym obraz jest przechowywany.

Możesz także najpierw załadować obraz, a następnie odwiedzić lokalizację na stronie github swoich projektów i nawigować, aż znajdziesz obraz, a następnie naciśnij download przycisk, a następnie skopiować i wkleić adres URL z paska adresu przeglądarki.

Spójrz na to z mojego projektu jako odniesienie.

Następnie możesz użyć adresu URL, aby je uwzględnić, korzystając ze składni Markdown wspomnianej powyżej:

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

Np .: Załóżmy, że używamy tego zdjęcia. Następnie możesz użyć składni markdown:

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

TYLKO TO DZIAŁA !!

zadbaj o to, aby nazwa pliku była zapisana wielkimi literami w tagu i umieść plik instalacyjny w pliku PNG, a następnie umieść łącze do nazwy pliku bez ścieżki:

![Screenshot](screenshot.png)

Po prostu poszerzam lub dodam przykład do już zaakceptowanej odpowiedzi.

Po umieszczeniu obrazu w repozytorium Github.

Następnie:

• Otwórz odpowiednie repozytorium Github w przeglądarce.
• Przejdź do docelowego pliku obrazu Następnie otwórz obraz w nowej karcie.
• Skopiuj adres URL
• I wreszcie wstaw adres URL do następującego wzoru ![alt text](https://raw.githubusercontent.com/username/projectname/branch/path/to/img.png)

Tak jest w moim przypadku

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

Gdzie

• shadmazumder jest mój username
• Xcode jest projectname
• master jest branch
• InOnePicture.pngjest image, W moim przypadku InOnePicture.pngznajduje się w katalogu głównym.

Można to zrobić na 2 proste sposoby:

1) użyj tagu HTML img,

2)! [] (Ścieżka, w której zapisany jest twój obraz / image-name.png)

ścieżkę, którą możesz skopiować z adresu URL w przeglądarce podczas otwierania tego obrazu. może występować problem z odstępami, więc upewnij się, że jest jakieś spacja czarno-białe dwa słowa ścieżki lub w nazwie obrazu add->% 20. podobnie jak przeglądarka.

Oba będą działać, jeśli chcesz dowiedzieć się więcej, możesz sprawdzić mój github -> https://github.com/adityarawat29

Tę odpowiedź można także znaleźć na stronie : https://github.com/YourUserAccount/YourProject/blob/master/DirectoryPath/ReadMe.md

Wyświetlaj obrazy z repozytorium za pomocą:

domena prepend: https://raw.githubusercontent.com/

dołącz flagę: ?sanitize=true&raw=true

użyj <img />tagu

• Domena :raw.githubusercontent.com/
• Nazwa użytkownika :YourUserAccount/
• Repo :YourProject/
• Oddział :YourBranch/
• Ścieżka :DirectoryPath/
• Nazwa pliku :example.png

Działa dla SVG, PNG i JPEG

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

Przykładowy kod wyświetlany poniżej po użyciu:

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

Dzięki: - 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

Znalazłem inne rozwiązanie, ale zupełnie inne i wyjaśnię to

Zasadniczo użyłem tagu, aby wyświetlić obraz, ale chciałem przejść do innej strony po kliknięciu obrazu i oto, jak to zrobiłem.

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

Jeśli umieścisz go obok siebie, oddzielając nową linię, myślę, że po kliknięciu obrazu przechodzi on do tagu, który zawiera odnośnik do innej witryny, którą chcesz przekierować.

NAJNOWSZY

Wiki mogą wyświetlać obrazy PNG, JPEG lub GIF

Teraz możesz użyć:

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

-LUB-

Wykonaj następujące kroki:

1. Na GitHub przejdź do strony głównej repozytorium.

2. Pod nazwą swojego repozytorium kliknij Wiki.

3. Za pomocą paska bocznego wiki przejdź do strony, którą chcesz zmienić, a następnie kliknij Edytuj.

4. Na pasku narzędzi wiki kliknij Obraz .

5. W oknie dialogowym „Wstaw obraz” wpisz adres URL obrazu i tekst alternatywny (używany przez wyszukiwarki i czytniki ekranu).
6. Kliknij OK.

Odwołaj dokumenty .

Rozważ użycie a, tablejeśli dodajesz wiele zrzutów ekranu i chcesz wyrównać je przy użyciu danych tabelarycznych w celu poprawy dostępności, jak pokazano tutaj:

Jeśli parser Markdown to obsługuje, możesz również dodać role="presentation"atrybut WIA-ARIA do elementu TABLE i pominąć thtagi.

Proces krok po kroku, najpierw utwórz folder (nazwij swój folder) i dodaj obraz / obrazy, które chcesz przesłać w pliku Readme.md. (możesz również dodać obraz / obrazy do dowolnego istniejącego folderu swojego projektu.) Teraz kliknij ikonę edycji pliku Readme.md, a następnie

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

Po dodaniu obrazu możesz zobaczyć podgląd zmian w zakładce „Podgląd zmian”. Tutaj znajdziesz swój obraz. na przykład w ten sposób, w moim przypadku

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

folder aplikacji -> folder src -> folder główny -> folder res -> folder do rysowania -> i wewnątrz folderu do rysowania znajduje się plik refrence_image.png. Aby dodać wiele zdjęć, możesz to zrobić w ten sposób,

![](app/src/main/res/drawable/refrence_image1.png)
![](app/src/main/res/drawable/refrence_image2.png)
![](app/src/main/res/drawable/refrence_image3.png)

Uwaga 1 - Upewnij się, że nazwa pliku obrazu nie zawiera spacji. Jeśli zawiera spacje, musisz dodać% 20 dla każdego spacji między nazwą pliku. Lepiej jest usunąć spacje.

Uwaga 2 - możesz nawet zmienić rozmiar obrazu za pomocą tagów HTML lub istnieją inne sposoby. możesz google uzyskać więcej. Jeśli tego potrzebujesz.

Następnie napisz komunikat zmian zmian, a następnie zatwierdź zmiany.

Jest wiele innych sposobów, jak to zrobić, stworzyć problem itp. Itd. Zdecydowanie jest to najlepsza metoda, na jaką się natknąłem.

Możemy to zrobić po prostu

• utwórz nowy numer na GitHub
• przeciągnij i upuść obrazy w treści divnumeru

po kilku sekundach zostanie wygenerowany link. Teraz skopiuj link lub adres URL obrazu i użyj go na dowolnej obsługiwanej platformie.

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

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

Jest jeszcze jedna opcja, o której nie wspomniałem. Możesz po prostu utworzyć kolejne repozytorium w ramach użytkownika lub organizacji o nazwie „zasoby”. Przekaż swoje zdjęcia do tego repozytorium i odwołaj się do nich z innych repozytoriów:

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

Zrobiłem to w jednym z moich repozytoriów i to mi odpowiada. Mogę wersjonować moje obrazy README dla wszystkich moich projektów niezależnie od mojego kodu, ale nadal przechowuję je wszystkie w jednym miejscu . Nie są wymagane żadne problemy, gałęzie ani inne łatwe do umieszczenia artefakty.