Dodaj obrazy do README.md na GitHub


1839

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?



5
Duplikat stackoverflow.com/questions/10189356/…, który został opublikowany w 2012 r.
leetNightshade

86
Nie poza tematem, GitHub jest narzędziem dla programistów.
Lance Roberts

Odpowiedzi:


1882

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)

137
Należy również rozważyć użycie linków względnych
mgalgs

53
Względne linki nie są tutaj zbyt przydatne, wyobraź sobie, że twój plik Readme jest również wyświetlany na npm, który nie hostuje obrazu w ten sposób - musi link do GitHub. SRC obraz powinien być na github.com domenie, a nie raw.github.com subdomeny i nie raw.githubusercontent.com domeny.
Lee Crossley

4
Właściwie skończyłem ze ścieżkami względnymi (które dla mnie to tylko nazwa pliku obrazu, ponieważ mam wszystko w katalogu głównym). Prowadziłem 2 kopie pliku README.md, jedną do instalacji lokalnej w katalogu / usr / share / projectname / docs, a drugą do github. Teraz mogę po prostu użyć tego samego README.md dla obu, ponieważ nazwy plików obrazów działają dobrze w obu przypadkach. Jeśli chcę opublikować kopię części mojego pliku README gdzie indziej, będę musiał hostować obrazy gdzieś indziej lub wstawić adres raw.github.com.
Colin Keenan

14
Sami GitHub polecają ścieżki względne: help.github.com/articles/relative-links-in-readmes Jednym z głównych minusów ścieżek bezwzględnych jest to, że jeśli obraz zostanie przeniesiony do wzorca , inne gałęzie, które nadal wskazują stary adres URL, ulegną awarii.
Jack O'Connor

3
Obecnie sugerowana domena nie działa, a link powinien wyglądać następująco:https://github.com/[username]/[reponame]/blob/[branch]/image.jpg?raw=true
Slavik Shynkarenko

423

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

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

15
Tak. Jest to zdecydowanie najłatwiejszy sposób, chyba że martwisz się wydajnością. Zauważyłbym, że jest to względne w stosunku do katalogu, a nie do repozytorium , więc jeśli masz „myimage.png” w tym samym katalogu, co „about_pics.md”, to znacznik jest następujący:![What is this](myimage.png)
Rich

5
Jest to niesamowite rozwiązanie, ponieważ 1) działa 2) obrazy są również wyświetlane w lokalnej przeglądarce, bez potrzeby dostępu do Internetu
Régis B.,

2
@ Bogaty, możesz rozwinąć swój komentarz dotyczący wydajności. Jakie są problemy z wydajnością w przypadku ścieżki względnej?
Lea Hayes,

2
Ta ścieżka jest względem czego?
Przerywa

2
Jak zauważył Lee Crossley, powinieneś unikać linków względnych, ponieważ pękają, gdy plik Readme jest wyświetlany na npm. Zamiast tego, link do obrazu src w domenie github.com z flagą „? Sanitize = true”, jeśli format obrazu jest podobny do SVG. Zobacz więcej szczegółów w odpowiedzi na SO: stackoverflow.com/a/16462143/6798201
AlienKevin

229
  • 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


24
O ile rozumiem, naprawdę nie musisz zapisywać problemu. W ten sposób tak naprawdę nie potrzebujesz tych fałszywych biletów w narzędziu do śledzenia problemów. Pytanie brzmi, czy jest to „bezpieczna” metoda, co oznacza, że ​​GitHub wykryje (po pewnym czasie), że obraz jest osierocony, a zatem usunie go z GitHub CDN?
peterh

2
Ta odpowiedź działała idealnie dla mnie i nie trzeba było zapisywać nowego problemu w repozytorium. Znalazłem film na Youtube, który wyjaśnia to szczegółowo: youtube.com/watch?v=nvPOUdz5PL4 .
Francislainy Campos

1
Ta odpowiedź działa i wymaga niewielkiego wysiłku. Problem można odrzucić, ale adres URL obrazu nadal występuje. Adres URL obrazu ma postać: user-images.githubusercontent.com ...
Sabuncu

6
To świetna sztuczka! Ale czy ktoś zna odpowiedź na pytanie @ peterh? Czy GitHub okresowo usunie obrazy osierocone (tj. Nie ma z nimi problemu)?
Johnny Oshika,

1
@JohnnyOshika Wątpię, aby ktokolwiek spoza github mógł definitywnie na to odpowiedzieć. Może to zależeć od tego, do czego służy „user-images.githubusercontent.com”. Jeśli dotyczy to tylko obrazów przesłanych do komentarzy, prawdopodobne jest, że mogą one skanować w poszukiwaniu brakującej relacji danych i usunąć obraz. Jeśli jest bardziej ogólna, zdecydowanie może być trudno ustalić, czy nie ma żadnych odniesień do pliku, co powoduje, że jest on kosztownie obliczony lub trudne do ustalenia, czy można go usunąć bez problemów.
twojabuddypal 21.02.19

127

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)

10
Nie, nie sądzę, aby dodawanie zrzutów ekranu do repozytorium git było dobrą praktyką. Zwłaszcza nie u nasady. Odpowiedź Ahmada Ajmi jest znacznie lepsza
Arnaud P

25
Nie u podstaw, ale możesz łatwo to dostosować docs/imageslub cokolwiek, małe zrzuty ekranu png są w porządku IMHO
Christophe Roussy

5
To powinno być przyjęte rozwiązanie, szczególnie. z sugestią Christophe'a, aby umieścić obrazy pod dokumentem / drzewem /
Mike Ellis

doskonały..!! jeśli png znajduje się w innym folderze. Po prostu dodaj ścieżkę „folderName / screenshot.png”
Soumen

Uznałem, że twoja odpowiedź jest przydatna w mojej sprawie: korzystam z Gitlab i używam logo.pngzdjęć w katalogu głównym repo, aby ustawić awatar do repo. Chciałem dołączyć to zdjęcie do README.md.
avi.elkharrat

84

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>

1
Gdy używasz znaczników HTML w swoim pliku znaczników. Zostanie zignorowany przez Pandoc , uniwersalny konwerter dokumentów.
Lorem Ipsum Dolor

1
Jest to najlepsze, aby można je było wyśrodkować lub umieścić z jednej strony (przynajmniej w przypadku mniejszych zdjęć)
Alexis Wilke,

Jak określić ścieżkę względną? Nie jest związany z README.md (we wszystkich przypadkach?).
friederbluemle

55

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 )


2
To dobre uzupełnienie przyjętej odpowiedzi. Aktywa są śledzone, obrazy nie są w trybie głównym, nie ma bałaganu. Uważaj tylko na git reset --hard; upewnij się, że zmiany zostały zatwierdzone.
dojuba

Na wolności na twojej maszynie. Można wskazać go wszędzie tam, gdzie dzieje się plik ( ~/Downloads, /tmp, itd.).
paulmelnikow

Przysięgam, pamiętam, że istnieje katalog, który możesz utworzyć, który nie będzie wyświetlany w Github. Dopóki nie będę mógł tego wyśledzić, ten post wydaje się kolejną najlepszą rzeczą do użycia. Dzięki!
Shadoninja

21

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

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


17
  • 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


Moim zdaniem jest to najłatwiejszy sposób ich dodania. Po prostu przeciągnij je do pola, skopiuj adres i wklej do pliku Readme z podpisami poniżej. Bum, gotowe.
Joe Hill

15

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).

wprowadź opis zdjęcia tutaj


2
Uwielbiam to narzędzie!
Dan

1
Ja też uwielbiam to narzędzie, powinna to być domyślna funkcja Gita !!
shridutt kothari

14

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


13

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:

obraz przepełnienia stosu przez alamin


10

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

wprowadź opis zdjęcia tutaj


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

wprowadź opis zdjęcia tutaj

wspomagany przez: adam-p


5
Zastosowanie tabel nie ma znaczenia dla tematu pytania PO.
mhucka

1
dzięki temu można ładnie dodawać zrzuty ekranu z aplikacji
UpaJah,

Użyj CSS zamiast Tabeli, to wstrząśnie twoim światem.
jeffmcneill

9

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)


1
Idealny i ostry.
Biswajit Das,

1
to działa. Właściwie myślę, że ta odpowiedź powinna zostać zaakceptowana
Luk Aron

8

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

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

8

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

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

Łą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: wizerunek

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 )


7

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.



wprowadź opis zdjęcia tutaj

wprowadź opis zdjęcia tutaj


6

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 %

5

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.


5

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)

5

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)

5

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. Otwieranie obrazu w nowej karcie
  • Skopiuj adres URL Skopiuj adres URL z karty przeglądarki
  • 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.

1
To jedyny, który działał dla mnie bezbłędnie. Nie ma wątpliwości co do ścieżek, niezależnie od tego, czy „master” odnosi się do katalogu, czy gałęzi, w której znajduje się start root itp. Tylko zastrzeżenie to Firefox (72), który nie pozwala na otwieranie obrazu w osobnej zakładce, więc na razie jest to Chrome I myśleć.
Thomas Browne

5

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


To zadziałało dla mnie. Mając obraz w folderze „aplikacje” pod README.md, użyłem:![](images/ss_apps.png)
cdsaenz

1
Dziwię się, że tylko Aditya wspomniała, że ​​spacje są problemem, a także w dość głupi sposób - żadnych błędów, ale twoja składnia jest po prostu wyświetlana, jakby żadna taka funkcja nie istniała. Głosuj za mną, że o tym wspomniałem.
Tammi

5

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

Przykładowy adres URL działa w przypadku plików SVG, PNG i JPG przy użyciu:
  • 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


Nie działało to dla mnie, dopóki nie usunąłem ciągu zapytania.
mhenry1384

1
Przynajmniej .png i raw.githubusercontent.com sanitize = true nie działa i należy ją usunąć. raw = true działa dobrze. github.com/sphinxy/AppDynamics.Playground/blob/master/README.md
Danila Polevshikov

1
rawgit.com został zamknięty w 2018 roku i nie powinien być już używany; powinieneś usunąć go z tej odpowiedzi. raw.githubusercontent.com , o którym również wspominasz, jest najbliższą alternatywą.
Rory O'Kane

4

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ć.


2

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 .


2

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:

wysoka herbata

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


2

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.


1

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.


Twoje rozwiązanie działa! To jest łatwe. Dziękuję
Jeanne z

1

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

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

1

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.